Learn more about hidden navigation menus
One of the biggest challenges in designing responsive websites is finding space for all of your content across varying screen sizes. Placing content like text and a hero image can be relatively straightforward, but finding locations within smaller screen sizes for components like navigation menus can be challenging!
When you design a website for a desktop computer screen size, there are lots of options to show navigation, from links across the top of the page to advanced gesture-specific navigation menus. Most of the time, websites on desktop computers have navigation that is visible, which means the navigation links are shown without users needing to take an action. Visible navigation works in designs for desktop screen sizes because there is a lot of digital real estate to explore.
On the other hand, screen space is a commodity on mobile phones. When you design a website for a mobile phone screen size, you need to prioritize content and still make navigation easy. To do so, you can use hidden navigation menus, which means that navigation links are placed under an icon, like a hamburger menu, and users have to take an action in order for navigation to be displayed.
There are two main kinds of hidden navigation menus that you can utilize in your designs to make the most of limited screen space: hamburger menus and flyout menus.
Hamburger menus
You learned all about hamburger menus earlier in this course. As a reminder, hamburger menus are a type of navigation menu that is represented by an icon with three lines. The lines resemble a hamburger’s top and bottom buns and the patty in the middle. The menu shows a list of links for navigation options within the website or app.
When users click the hamburger menu, the menu slides in from the direction that the menu is positioned within the design. Typically, hamburger menus are shown at the top left corner of a website, so the menu slides in from the left side of the screen. Hamburger menus are very widely used in mobile designs, so your stakeholders and team members will easily recognize them in your mockups with little explanation needed.
Check out the example in the image below of a hamburger menu in a real entry-level UX designer’s mockup. Andrew designed Runsocial, an app is which users run on a treadmill with their friends using “mixed reality” technology. When users click on the hamburger menu in the top left corner of the screen, the menu slides in from the left and neatly stores important pages, like links to a trainer and the settings page.
Flyout menus
As you learned in the video, a flyout menu provides an overview of a website’s hierarchy and helps users find information to navigate the site. The flyout menu gets its name because the menu “flies out” from the side of the screen when you hover your mouse over or click on an element.
For example, Google designer Kaiwei uses a flyout menu in their style solution app Wardrober. When the user taps on an item in their closet, the flyout menu appears.The flyout menu helps illustrate the digital location of a bracelet, as shown in the image below.
Check out this 5-minute video from Adobe XD to learn how to create a flyout menu step-by-step.
Additional resources
Choosing the best navigation components for your designs is essential to making a product that is easy to use. To learn more, check out this article from Adobe XD about essential patterns of mobile navigation, including hamburger menus and tab bars. Or, dig into this article from Adobe about creating an animated mobile menu.
You might also want to check out this article from Adobe about how to make a responsive website in Adobe XD using responsive resize to save time.
Sources: Google UX Design Professional Certificate
Coursera | Responsive Web Design in Adobe XD
