Navigational structure is always difficult. Remember the two general rules of thumb: there should be 5-9 links per page, but no page should be more than 3 levels (clicks) deep. We tend to bend this rule by having multiple menus or by using multi-level menus. Building a site that’s easy to navigate is difficult even without considering responsive (mobile-first) design.
There are many approaches for responsive menus. Usage actually varies based on site design and personal preference. Below, please see a partial list. If you think of other approaches, please let me know!
Convert From Row to Column
Unordered List & Media Query
Menus are often viewed as a simple collection of links—a list. Many menus are actually formatted as lists. This is an excellent approach to building a nice menu on a desktop, but we can also use this approach for a mobile-first responsive design. Simply format the initial menu using display: block. The links will form a column on a small screen. Use a media query to switch to display: inline-block (or inline, depending on approach) for a larger screen.
Concerns: Unfortunately a menu created in this way will likely cover most of the screen for smaller devices. Remember that content is truly our goal: the user should not need to scroll. However this is a simple and effective approach when applicable.
FlexBox & Media Query
Rather than using an unordered list, consider using a flexbox instead.
Full Page Menu
Unordered List / Flexbox, Second Menu Page, & Media Query
This approach is very similar to the Unordered List & Media Query approach; however, a second web page is created to serve as the mobile menu. The default menu for a smaller screen will contain just a hyperlink to the second web page (the mobile menu). The mobile menu page consists of a set of links arranged vertically. This menu is reached via a link on the main web page. However when the viewport is large enough, the menu link connecting to the mobile menu page will be hidden using display: none; and the other hyperlinks will be made visible using display: inline-block. This provides a full menu when space allows, but minimizes the space used for navigation on smaller screens.
Of course a flexbox could be substituted for the unordered list; the results are the same.
Concerns: This approach forces the designer to maintain two menus.
Positioning
Reposition the Menu
This approach is rather uncommon but may have certain advantages. A mobile device layout would include a menu link at the top of the page in the conventional spot; however, the menu itself is placed at the bottom of the page. Clicking the menu link simply moves the user to the bottom portion of the page. In a larger display, a media query could be used to reposition the menu at the top of the screen and to hide the menu link.
This could be accomplished using the position statement, flexbox with the order attribute, or grid using explicit locations. Flexbox actually makes this fairly simple.
Concerns: This is a somewhat unconventional approach.
Dropdown Menu
Dropdown menus and off-canvas menus work in much the same way. The navigation content is hidden or displayed such that it cannot be seen until some event occurs. The triggering event could be a form element, JavaScript, or the :target element.
In a dropdown menu, the menu items could be formatted with an unordered list or a flexbox. Other options could work also.
Form Element (Hidden Check Box)
This is a fairly popular approach right now. Since touch-screen devices do not support hover, a form element—generally a checkbox—is used instead. The checkbox itself is hidden, but the label is used as a control. When the user touches the label, the menu is displayed. Note: this could easily be used to create a “hamburger” menu.
Concerns: There are reports that some older mobile browsers do not support the check box in this fashion. Also formatting can be difficult.
JavaScript: Switching Classes
JavaScript can be used to create responsive menus in several ways. One approach is simply to use JavaScript to apply a new class to a menu whenever a control is touched.
Concerns: First, JavaScript may not be available. Second, this assumes a little programming knowledge.
Target Attribute
The target attribute is relatively new, but very useful for menu design. Essentially, the browser will apply new formatting when a user follows the specified link. To create a menu, we simply cause the menu to be hidden by default; the menu becomes visible whenever a user follows the link.
There is an issue: closing the menu requires the addition of an empty menu item. This seems awkward but really is not.
Off-Canvas Menu
Numerous websites create a responsive menu by hiding the main menu off the page out of site. Essentially a menu panel is created and positioned so far to the right (or any direction really) that no one will ever see it. An event such as a checkbox, JavaScript, or :target attribute is then used to relocate the menu in a visible position. When no longer needed, the menu is simply relocated.
This is an excellent opportunity to use translatex and transition!
Concerns: Many security-conscious users will elect not to use JavaScript. Those users will not have access to the menu. In addition, Google and other search engines have threatened to lower the search rankings for sites using hidden content. Those search engines may be unable to distinguish between content and a menu.
Off Canvas Menu Using Grid
Grid provides an excellent option for off-canvas menus. It's possible to layer items on top of one another within grid.
Combination Approaches
Multiple combinations of the above approaches can be used.
External Demo combining FlexBox, checkbox, and media query
Other
I’m sure there are many other approaches. These are the ones I’ve seen used the most often.
Concerns
"Above the Fold" Violation
Many of the examples presented here arrange the menu in a column on a mobile device. This violates the “above the fold” rule, which suggests the most important content should appear first.
Hamburger Icon
The hamburger icon also presents issues. The icon itself has actually existed for a long time (it was created by Norm Cox for the very first GUI, which was used on a Xerox computer. History of the Hamburger Icon. Numerous authors have debated the value of this approach. I will not repeat the arguments, except to say some feel that users may not find the menu.
Icon Sources
Google Material Design Icons are excellent. However, there are multiple alternatives. Some are free, others are not.
Accessibility
Accessibility is a huge issue. Unfortunately, many responsive menus are not tremendously accessible. One possible solution involves placing a hidden navigation link at the top of the page, before any other menu options. This link would use a title such as “skip to navigation”. This link should skip to a SECOND menu located at the bottom of the page. This second menu should be in a simple text format, such as a basic list. A person using a screen reader would thus be able to jump to an accessible menu. Note: this is not a great solution, but is fairly common.
Personal Preference
Preference varies by person, of course. I believe we should select the simplest approach that meets the needs of our design. Personally, I really prefer simplicity.
Other Demos
CSS Tricks, Smashing Magazine, and Speckyboy.com presents a great summary of approaches. Some of these are similar to mine.
