Whenever I had to pay rent at my old place, I always found myself a bit frustrated. It wasn’t because paying rent itself is naturally an act of frustration, but because the designers of my rent manager portal decided to use this little navigation thing in the upper right-hand corner, just below the site’s search field:

The dreaded hamburger icon. On desktop.

Popular on WordPress, ThemeForest and other template sites, the hamburger, or sandwich, or side drawer, is an icon consisting of three stacked lines that can be clicked to reveal more content, such as the primary navigation.

The use of hamburger icons are detrimental to customer engagement in desktop. We’ve all heard the saying “out of sight, out of mind;” it is a phrase that can be easily applied to web design. By hiding your site’s menu, you are forcing customers to work harder to navigate and presenting a nuance older generations may not be familiar with — mistakes that can cut your customer engagement in half. You are doing the worst possible thing you can make visitors do: think more than they have to.

A less navigable site.

On most websites, primary navigation is an important part of how content is discovered and accessed. By hiding the navigation behind a menu, we’re decreasing the likelihood that the navigation items will be seen or used at all. It also removes visual hierarchy, limiting a visitor’s ability to see where they reside in a site’s layers and causing unnecessary confusion.

Patterns rely on familiarity and emerge slowly over time. The ones we count on today have been around for many years; although floppy disks are cold in their grave, their likeness still represents the “save button” even to younger generations who have probably never laid eyes on one. The three horizontal lines dubbed the “hamburger menu” are quickly becoming a standardized icon on mobile due to the necessity of hidden menus on the small screen. However: on the desktop, users are still confused, as portrayed by its low engagement.

Here are a few things that the hamburger menu can be mistaken for:

• A stack of pancakes
• A very short to-do list
• Cheetos performing a synchronized swim routine
• A tally taken by someone laying down
• Scratch marks from a partially-declawed bear

It isn’t a well-enough established icon outside of the context of mobile to depend on to create customer conversions. This doesn’t stop many companies from making an ill-considered attempt: Time Magazine, for example, who is known to have an older readership, hides their entire menu behind a hamburger regardless of screen size. Users have plenty of new things to learn without adding contrived navigation patterns into the mix.

Design appears lazy.

Hiding your navigation under a single button is like shoving a messy room under your bed — it’s lazy and suggests you don’t care about your visitors. While minimalism is a popular design philosophy for creating modern, attractive websites, it doesn’t necessarily mean less content; you can successfully deploy minimalism without removing important information. To achieve minimalist design, manage perceived complexity by adding more white space to the interface and reducing the contrast between elements to make the whole layout visually quieter while keeping all of the necessary information easily accessible.

On Snowbird’s website, they successfully manage a large amount of content with a minimalist design.

In addition to appearing sleek, many websites have jumped on the hamburger-wagon because it doesn’t require a separate approach for different screen sizes. Companies like Time, The Atlantic, Fastcompany, Upworthyand Slate seem to be in agreement.

“We knew that people are coming into the site through desktop at one point and mobile at another,” says VP of Tech at Slate, Dan Check. “We wanted to make sure that there was some sort of consistent navigation experience between the two.”

While there are many in argument for the “mobile first” design approach, it is the job of a designer to provide an optimal experience for the available screen size and not hobble themselves by slavishly following this philosophy — if we ignore that the size of the screen has changed, we risk problems such as higher friction navigation and an overabundance of white space creating an unbalanced layout. There are ways to foster consistency without forcing everything to conform to a phone-sized viewport, such as color palette, spacing, hierarchy and content placement. Designing a site so that it feels the same across devices is much more important than whether it looks exactly the same — in a world of unlimited devices and screen sizes, we no longer have the luxury of making things pixel-perfect and identical; we can be certain they won’t be.

So, what about mobile?

On a larger screen, such as an iPad or desktop, there’s more room to reveal the important tasks that users want to complete on a website, but in the case of a phone there’s the issue of limited real estate, so compromises on discoverability of content become necessary. While the hamburger succeeds at its purpose when navigation becomes too overwhelming for the allotted screen size, you may consider laying out your full menu when the site’s navigation is simple — even on mobile. The challenges of small screens are an opportunity to consider winnowing your navigation to fewer, higher priority choices than can be easily presented instead of a longer, less focused menu.

Conclusion

Don’t let the hamburger menu be your life vest for a bad content strategy — if your navigation is really so substantial that you have to hide it, then leaving it to your visitors to do the heavy lifting is going to backfire. While hamburger menus are useful when you are faced with fitting a large navigation on a small screen, they should generally be avoided on desktop. Your most important wayfinding information should not be hidden clicks deep — your visitors should always be easily able to determine at a glance where they are in the hierarchy of your website and how to get where they’re going next.

The word “accordion” typically conjures a mental image of your favorite polka band. However that’s not what we are talking about when referring to accordion menu. Although polka music can offer a rip-snorting good time, the term is associated with something different in the realm of web design. User interface accordions might refer to menus, widgets, or content areas which expand like the musical instrument. These interfaces have grown a lot more popular in recent years with the expansion of JavaScript and more prominently jQuery.

I’d like to cover a series of examples and techniques for building accordion interfaces into any website layout. Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page. Granted these content displays also require dynamic effects for switching between page elements – so there are pros and cons to accordions. This post should outline the important concepts and topics related to accordion interface design.

Why use Accordion Menus?

I like to think of accordions as content management tools. When you have a page that’s broken into dozens of paragraphs, links, images, or just too many blocks of content… accordion menus to the rescue.

Not every website needs an accordion menu and you certainly won’t find them all the time. But that’s no reason to ignore the concept entirely. The purpose of an accordion menu is to manage an overabundance of content through dynamic switching. And you can build quick accordions if you use website builders or CMS engines like WordPress.

But each interface works differently based on the circumstances of the layout & the type of website.

Nowadays the biggest concerning factor would be the total number of visitors who don’t have JS-supported browsers. Over the past decade this number has dwindled considerably low as more people are upgrading their computers. This means you should have almost no concern because even mobile smartphone browsers support JavaScript. If the content is viewable and the accordion is usable then where’s the harm?

Just be sure that each accordion component has a real purpose. There are times where I’ve found accordion FAQ pages that could have just listed content down the page without forcing me to click on each heading. Granted I understand the premise but if each answer can be surmised in a few sentences, hiding that content isn’t going to improve the user experience.

So when exactly should you use accordions? Mostly with larger menus or content which might behave cleaner using expandable sections. These could be sub-headings or even multiple levels – the point is to organize content in a way that makes navigation simpler than endless scrolling.

Sliding Menu Effects

One of the most common interfaces you’ll experience is the sliding menu effect. This is usually vertical with a series of links hidden within sub-links. Clicking on a primary link will then expand the list of sub-links in a sliding animation.

Sometimes a website’s entire navigation menu is built on this accordion effect. Other common choices are dropdown menus which appear on hover – but accordion menus don’t slide over the page since they’re built into the page. So the effect is somewhat different and offers a different user experience by comparison.

Take a look at this Designmodo tutorial which explains the process of accordion development in a nice tutorial. The source code is free to download but it should really serve as an example describing how this interface might work. Designmodo has a live sample preview which demonstrates how the menu behaves in action.

Notice how the menu will automatically close when opening a new section. This is typical behavior when constructing an accordion menu because only one primary menu is open at any given time. But this is not a mandatory feature and, in fact, most accordion menus allow every section to be open. This choice depends largely on the website itself and how content is expected to behave.

CSS3 Tabbed Content

Another example of accordion content is based on tabbed widgets. So instead of having links listed vertically, tabs are used to manage shifting content. This is another really popular method of content management because JavaScript has made the process super easy. But since most developers are already familiar with JavaScript, I’d like to cover the more advanced techniques.

An alternative to JavaScript is the expandable accordion UI with CSS3. Granted they both seem like a risk but CSS3 has much less browser support. The only benefit is that CSS3 doesn’t require as much code and offers a simpler method of animation. If you prefer modern CSS3 animation check out the following tutorial:

Codrops publishes very high-quality content and their accordion CSS3 tutorial is no exception. The code is free and downloadable if you want to try it out yourself. Their live demo includes a couple different options which utilize checkboxes vs. radio buttons.

Checkboxes allow users to select multiple items at once. Using the checkbox method you can have many different content areas open at the same time. Radio buttons only allow one radio item to be selected. This means when opening a new section the previously-open section will close. Both work great and will vary based on the needs of each project.

Sliding Portfolio

Webpage content is managed via alternate pages for simplicity and ease-of-use. Visitors would rather browse through different pages rather than sift through a long single-page design. However working with collapsible accordion content makes the latter a lot more reasonable.

Take for example the homepage of Toko which uses a dynamic portfolio listing. As you click on each item the list will collapse smaller for an easier view of the project. This is by far an odd concept but it works great on their website. Why? Perhaps because of the minimalist design, perhaps because of the grid-like structure.

Either way portfolio sites can be an excellent choice for accordion widgets. Not every project should rely on accordions to best manage content. But think of the control you can offer visitors by organizing projects into larger categories and even sub-categories. Make use of this sparingly but keep it in mind.

Image Galleries

In a similar vein as the portfolio listing is a collapsable image gallery. In accordion-style this can take many forms as vertical, horizontal, slidable, tabbed, you name it! Touch-based interfaces have also allowed for swipeable image galleries that work nicely with computer mice too.

Getting back to Codrops I found another great tutorial covering an image accordion with CSS3. The effect is really cool and surprisingly supports click events. Each image is given some caption text which animates into view. What I like about this design is that it doesn’t rely on tabs or links or anything outside of the images themselves – so the content becomes the tabs. Pretty cool right?

Here’s a free jQuery plugin for building a responsive accordion image gallery. This example behaves similarly to the Codrops tutorial except all the animations are handled through jQuery. Also the caption text is a bit larger and seems more smooth. I’d like to state that either one of these effects could be duplicated and pushed onto the other – it’s simply a matter of recoding the design to fit the interface.

But my point is to demonstrate that both CSS3 and JavaScript can be used to create most of these effects. Unfortunately older browsers will never be backwards-compatible to support new CSS3 animation. Working with JavaScript is still the safest choice, but as more people upgrade their web browsers we can hope to see a future with primary support for CSS3.

Free Code Snippets

I’d like to wrap up this post by offering a collection of free open source code snippets. Each sample demonstrates the power of accordion content whether in a navigation, FAQ listing, or tabbed widget. All of these codes have been shared on CodePen and should be reusable on any project.

Granted you can always pick up a free plugin to rebuild something from scratch instead. Lots of developers release their code for free and try to help the community with free plugins. And of course there will always be those who prefer to build everything from scratch. But if time is a factor then I highly recommend working from these code snippets to ensure greater compatibility and a much quicker development schedule.

3D Accordion

Material List

Animated Accordion

CSS3 Dark UI

Full-Width Content

Multi-Level Accordion

Flyout Dropdown

Colored Bars

Multi-Level Accordion

Responsive Content

Sexy CSS Accordion

Dope Accordion Menu

Vertical Radios

Horizontal Radios

BEM Accordion

Pure CSS

Blue Accordion

Flexbox Tabs

Pure CSS Menu

Multi-Color Accordion

Hamburger icons are those little three-bar icons you see in the corner of many websites and mobile apps. These primarily trigger a sliding drawer navigation which contains links to pages all around the website. Sliding drawer nav menus are great for responsive design but they can also be tricky to implement. These tips will help designers come to terms with the most popular solutions for hamburger menu design.

Please note this article will not be a discussion on the pros & cons of using hamburger menus. These are just some good tips and design patterns for building sliding drawer hamburger menus. Plenty of alternate navigation styles exist which could be used in place of sliding menus if these feel too restricting.

But well-designed sliding nav menus can fit perfectly into most layouts and have become a well-known interface style by most smartphone users.

Extensive Browser Support

Every major web browser and operating system should be considered when designing these menus. However mobile users would be the ones truly afflicted if they were unable to browse through a website.

The majority of modern browsers support pure CSS sliding menus and basically all of them support JavaScript. So a good idea might be to use pure CSS for the animation with JavaScript as a fallback. I wrote a great tutorial detailing how to create this effect for any layout.

Generally speaking the real troublemakers would be older smartphones and/or depreciated browsers like Internet Explorer 6 or Firefox 2. While these older browsers do support JavaScript, they may not support CSS rendering for menus on top of content or sliding animations.

But at some point you’ll have to accept which browsers are being support and which aren’t. It’s possible to design a fallback using IE conditionals where the sliding drawer becomes an inline block list of links.

Your goal should be to support the widest variety of browsers without compromising the design. It may not be possible to support IE6 but you should aim for the vast majority of mobile operating systems along with all current browsers. Also try using Google Analytics to track which browsers are most commonly used by visitors over an extended period of time.

Use a Recognizable Icon

The traditional 3-bar icon is used by most websites with the sliding drawer menu. This is how the menu came to be named “hamburger” since the 3 bars could be considered a patty with two buns.

It’s easy to design your own hamburger from scratch or grab a free icon from various online sources. But the point is to remain consistent for a good user experience.

Icon design is already a confusing subject with so many different glyphs and symbols out there. By sticking with the traditional three-bar icon you give users a sense of closure because they will instinctively know(or assume) what it does. Most users are familiar with the 3-bar icon so it’s the safest bet.

Bring Focus to the Menu

There are different methods of drawing attention to a hamburger menu. Some use fancy animation while others take up the majority of the screen. Although there aren’t any incorrect methods, there are some that feel better to me from a UX perspective.

One of my favorite hamburger menus can be found on the homepage for Comedy Central. When the site is fullscreen all the navigation links stream across a horizontal navbar. However when the site drops below a certain width all the links are hidden within a sliding responsive nav menu.

The reason I love their effect is because the nav menu opens a dark modal over the page when triggered. So when a user opens the menu it’ll appear “on top” of the page because it won’t be shrouded within the semi-transparent dark layer. Also the website text cannot be selected which leaves the navigation as the only clickable item.

Their sliding drawer menu can be closed by either clicking the 3-line icon or clicking anywhere else on the page. It’s a simple effect and this is what makes it so great – the design blends perfectly without any major rendering bugs.

But alternatively you might try going with a vertical navigation instead. This can be created from the same icon link, but instead have the navigation slide down from above the page.

You’ll see an example on The Minute of Silence mobile website. When the page is fullscreen it’ll use a sliding nav menu which appears vertically. This is when the site loads on the primary domain – but using the mobile prefix it’ll pull from the top menu instead.

I find this technique works best if you don’t have too many links in the menu. Vertical navs are perfect for large companies that have over a dozen links which people need to access. So the design style is completely relative to each website project.

Top Free Sliding Nav Plugins

Let’s wrap up these best practices with a collection of the best sliding navigation plugins. The majority are built for jQuery since it’s the most popular JavaScript library, but there are others available.

Take a look over the following plugins to see if any of them could be useful. When going for a customized hamburger menu it would be easier to just hard-code your own from scratch. But not every project needs a custom design and you will save time by going with a pre-built solution.

Slideout.js

Very recently I stumbled onto Slideout.js which is a touch-enabled hamburger nav menu library. Slideout.js is not a plugin – it’s a dependency-free JS library for creating sliding drawer menus.

It has native scrolling and works great on all touchscreen devices. As of writing this article the Slideout GitHub page has frequent activity ranging only a few days back, which means the developers are still actively working on updates. So far I’m truly impressed with this project!

Shifter

Shifter is a lovable little guy because it’s a newer component library which has been minimized for production websites. This plugin does run off jQuery and incorporates all the traditional features you would expect.

The difference with Shifter is that it’s ridiculously simple. There are very few customizable options and the only methods to call are for open/close and to destroy a menu. If you’re skilled at writing JavaScript then this could be a library for you to customize yourself, but it won’t be fully-featured right out of the box.

Drawer

The combination of CSS3 and JavaScript has been a true match made in heaven. Drawer is a jQuery plugin which relies on CSS3 as the natural method for transition effects. This is often better since the animations can be smoother and CSS is rarely disabled like JavaScript.

Please note that Drawer requires a hefty amount of plugins like iScroll to create some of the effects. But it does work great and looks fantastic on mobile devices.

Sidr

For a more straightforward plugin you might try Sidr on purely-responsive websites. This plugin was built not only for hamburger menus but also to display the full menu on larger screens. Sidr is controlled programmatically so it can work from a click or swipe event. The code is easy to use and easy to customize for a first-timer.

Pure Drawer

The Pure Drawer library is built using CSS transition effects for off-canvas menus. This library is triggered exactly like sliding hamburger menus with the added benefit of relying on CSS to handle the majority of effects.

Pure Drawer has lots of custom options for pulling the menu left, right, or even from the top of the page. You can also change the animation style and icon design for the menu. If you want a nav made with pure CSS then I’d highly recommend this library your hamburger menu.

Slidebars

Slidebars is yet another jQuery plugin for implementing sliding sidebars and hamburger menus. It’s a little slower with development because the creator has been busy with other work. But it does have a GitHub project page where contributors can ask questions or supply bug fixes.

Wrap Up

Design is not full of rules, but rather guidelines for creating wonderful ideas. In web design these ideas need to be usable and easy to interpret on any screen. Hamburger menus get a lot of flak but they’re still used a lot because they work. So while this trend is still around it’s a good idea to create menus that users will anticipate rather than trying to radically change the game.

featured image source

The seemingly endless amount of navigation styles can be overwhelming. Some websites only require 3-6 links and have much more flexibility than sites with 30+ links. How do you plan large detailed navigation menus without losing your hair?

Mega navigation menus are the typical solution to high-capacity link websites. These come in all shapes & sizes for varying projects from international corporations to online magazines.

Each of the following patterns have been hand-picked to match up with live examples online. If you’re designing a mega nav dropdown then you have to check out this article. I’ll cover tips regarding how to design a successful menu that’s both functional and stylish. By the end of this post your head will be jam packed with new ideas and healthy in-tact hair follicles.

Matching Styles & Animations

CSS3 animation has been a game changer for web designers. Everything from simple page elements to SVGs can be animated on command.

Typical dropdown menus have relied on JavaScript for years. CSS3 is one of the newer methods that has also been applied to mega dropdown menus. The pattern you’re looking for is consistency with animation and design style.

Take Mashable which is one of the largest social media magazines online. When first hovering onto one of the links a brief delay passes before a dropdown flows on-screen. As you transition between different links you’ll find that new content populates the same box.

Mashable’s layout is completely responsive so the menu is built to take up 100% of the screen. It may not be the classiest example but consistency supersedes fanciness in the realm of UI design.

Another great online magazine is Polygon which features very similar animations. Their navigation also takes up 100% of the screen while switching between different content styles.

Visitors expect some consistency with colors, spacing, and typography. It’s a good idea to maintain this consistency with your animations, too.

Multi-Level Flyouts

Really large dropdown menus need to include tiered navigation. This occurs when you have links that include sub-links and need to reserve enough space in the menu to show them when appropriate.

One of the simplest examples can be found on TutsPlus when you hover the “Free Tutorials” link. Each tutorial category includes many sub-categories that fly out depending which link is active.

Background colors also match and feel rather apropos in this layout. Simplicity really does work to your advantage when used correctly.

A much more detailed example is the Walmart dropdown navigation. The company offers so many products that each department needs to include a flyout menu. This menu in turn contains a few sub-categories with sample products.

The design itself is fantastic and works in unison with Walmart’s branding. Links are small but not too small, hover effects fit into the menu, and everything just looks like it’s in the right place.

When designing a multi-level nav your concern is always going to be screen space. You never know the end user’s exact resolution and it takes work to design menus that run at all sizes. But take these examples as guides that simplicity can go a long way.

Dropdown Icons

Visual cues are a huge aspect of user experience design. Certain glyphs and symbols are instantly recognizable and imply a specific action.

For example, almost everyone recognizes a printer icon and tacitly understands how it works. The same can be said for dropdown menu icons that represent hidden flyout menus.

Take a look at the demo for NanoMag on ThemeForest. It uses a horizontal navigation with downward-pointing arrows after each link. These arrows imply that something will happen underneath the link – and sure enough, when you hover a menu pops out.

You should also notice that a few links do not have arrows. When you hover these links they behave just like regular links without a meganav menu. Dropdown icons visually define which links are meant to behave differently than others.

Click-to-Show Toggles

Some developers prefer to change up their interface design with more forced interaction. Microsoft’s homepage uses dropdown mega nav menus for their top navigation bar.

But to access the secondary links you have to actually click on the primary link. Useful feature or annoying misstep?

I personally don’t like this design because it feels like a prank. The main links should go to individual pages, but they only show secondary menus. To get to a page you need to click twice.

Playing devil’s advocate the links do have icons explaining that they’re meant for dropdowns. I just would’ve expected a cleaner experience from Microsoft’s corporate website.

If you like the click-to-show feature it’s certainly a viable option for mega nav design. But it seems to work a lot better on mobile screens where there’s no such thing as “hovering” a link.

Varied Dropdown Menus Layout

Dynamic navigation menus can include lots of different media like thumbnails, grids, and block-level link lists. These varied displays look great but may not be appropriate for all styles of content.

A useful trick is to vary your mega navigation menus based on content. So one menu could include thumbnail photos with links to articles, and another menu includes nothing but text links. This is mostly useful on a website that has large volumes of content marketed for different purposes.

The Food Network website has a beautiful mega menu tied onto each primary link in the navigation. But each dropdown menu is slightly different with a unique structure of links, thumbnails, and list styles.

Food Network is a large brand so it’s understandable to see this technique on their website. It’s a great example to demonstrate how content can be organized in a way to capitalize on clicks(for example hover the “videos” link).

A simpler example can be found on Best Infographics which uses a mixed bag of design patterns. Some dropdown menus are just regular dropdowns – no mega navigation, just simple text. But other dropdowns are fullsize horizontal mega menus with thumbnails and everything.

This is a great design pattern for websites that have varying styles of content. It’s easy to implement but requires a lot of grunt work in CSS. If you have the patience to try this design style you may be surprised how well it works on larger websites.

Wrap-Up

In truth there isn’t a lot to master regarding mega navigation design. These trends mostly fall into basic UX components wrapped up in pretty interfaces with a red bow. If you understand user experience and study from these examples then you can build top notch meganav dropdowns with ease.