Long live/death to, the navicon!
Facebook is given credit for popularizing the use of navicons to hide navigation options off screen, or off canvas. With the birth of responsive web design the web design community was desperate for a solution to navigation. Packing everything into a navigation panel that sits off canvas, and moves in upon selecting the navicon was an attractive solution. It seems the community latched onto it as a somewhat easy solution that seemed to make life much easier for the designer and developer. As a result the navicon has become a go-to option for mobile apps and websites. Recently however, the navicon has come under attack. In many of these debates it seems that one crucial detail is omitted. The mobile apps industry is easily moving away from off screen navigation in favor of on screen options. This comes as the trend is towards focused, single purpose apps. This makes the change more reasonable. In contrast, even a small web site can be packed with dozens, if not hundreds of links in the navigation. Take for example a site like sony.com, or even this site. These sites have navigation needs that go well beyond what is possible with a simple tab strip. For this reason it seems to me that navicons, and off screen menus are here to stay. We simply have to be aware of their limitations, potential problems and so on. And of course, always keep in mind the usage: is it a mobile app or a mobile/responsive web site. Because they are not the same.![01](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/01.jpg)
![02](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/02.jpg)
![08](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/08.jpg)
![09](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/09.jpg)
![10](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/101.jpg)
Full screen navigation
The second trend I would like to look at is the use of full screen navigation menus. These menus are typically activated by a button or link of some type; quite frequently a navicon. The difference here is that instead of a small panel that slides out, the navigation takes over the entire screen. On mobile this feels normal, but on the desktop this is actually a new and interesting approach.![03](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/03.jpg)
![04](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/04.jpg)
![05](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/05.jpg)
![06](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/06.jpg)
![07](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/07.jpg)
Perfection of the super-sized menu
Finally, I want to consider the super sized or mega drop down menu. The use of super sized menu systems are nothing new. What I do find interesting is the content placed inside of them. In my assessment of things designers have really put this new space to work in powerful ways.![11](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/112.jpg)
![12](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/121.jpg)
![13](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/131.jpg)
![14](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/141.jpg)
![15](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/151.jpg)
![16](https://www.webdesignerdepot.com/cdn-origin/uploads/2014/12/161.jpg)
Conclusion
These three trends, though we can discuss them separately have many traits in common. Primary among these is how navigation has changed over the years. Dropdown menus used to be generally an organized list of links. For the most part they were somewhat neutral in that all things were presented equally. Now we find that navigation systems are a key way to help guide users towards desirable goals. For me the challenge is clear. That we should elevate our thinking of navigation and really embrace the influence it has on the experience of using the web sites we create. All too often I find that navigation is a bit of an afterthought. When in fact, it should be among the most critically considered and refined elements in the design.Patrick McNeil
Patrick McNeil is a designer, developer and writer; but above all things he is a passionate educator. He is a Professor of Graphic Design at the University of Missouri St. Louis where he focuses on teaching UX Design methods and front end development techniques. Patrick is also the author of the bestselling book series The Web Designer's Idea Book and the curator of DesignMeltdown.com. For more information about Patrick visit his personal site, pmcneil.com, or follow him on Twitter @designmeltdown.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…