Menu Bar and Menu Guidelines
Menus and menu bars contain links and buttons that help users navigate to different pages and features.
Types of menu bars
There are a few different types of menus.
The top-level navigation of a website is called a menu or a navigation bar (navbar). These links allow users to move through different pages or screens. On larger websites, there may be instances where multiple links will get stored under one main link, creating a dropdown menu.
App menus on mobile
App navigation on mobile is more like browser navigation, as it allows you to switch between pages.
This pattern is often confused with tabs. However, there’s an important distinction between the 2: tabs navigate between similar panes, whereas mobile app navigation switches between different pages.
Application menus and dropdown menus
Unlike website navigation, application menus don’t take you to different pages; instead, they surface options for you to interact with. These options can include settings (e.g. “View”), formatting options (e.g. “Edit”), analytic tools (e.g. “Word count”), creation options (e.g. “Insert image”), and much more.
Application menus that show current settings
Some settings in the dropdown menus are actually toggles that allow you to switch something on or off. If that is the case, you can show that it is currently active by using a check mark.
How to in Balsamiq
Using formatting text in Balsamiq, you can show what settings are currently active.
Application menus that show shortcuts
Most robust applications or programs encourage the user to use hotkeys or keyboard shortcuts. These shortcuts are often indicated next to the action in the dropdown menu for ease of reference.
How to in Balsamiq
You can show keyboard shortcuts or right-aligned text in a menu by separating the text with a comma (,).
Application menus with multiple levels
Depending on the complexity of your software, you can have multiple levels of dropdown menus. For websites, this isn’t encouraged as it’s not the best user experience. However, you can get away with it for software applications so long as the sub-menus are logically ordered.
How to in Balsamiq
You can create an arrow in menus by using the right chevron (>) after the text.
Options dropdown menus
An options or kebab icon is a button that launches an options menu. These menus should contain ways that the user can interact with the current page; they shouldn’t be used to navigate too far away.
States and selections
Menus and menu bars have different appearances depending on the user’s last interaction. These visual cues let the user know what they can do and what they have done.
Selected showing current page
If you’re on a page that’s in the top navigation, this should be indicated in the menu bar.
Selected with dropdown menu
If one of the options in the menu bar is a dropdown menu, you can show that it’s selected and have the dropdown menu open.
If the user is on a page that isn’t one of the pages in the primary navigation, then none of the top links should show as active.
Disabled menu item
Some items in a menu may not be available for the user to click on because of business rules or because they have to click/select something else first. If an item isn’t available to the user, it should be grayed out.
How to in Balsamiq
Using formatting text in Balsamiq, you can choose what should be disabled. Add a minus (-) directly before and after the text you want to be disabled.
There are a few best practices when it comes to menus and menu bars. Overall, you want to make navigating as simple as possible for the user.
Consider adding a secondary navigation menu
Sometimes there’s not enough space in the primary navigation. You can either reduce the number of pages or add a secondary navigation menu with the less important pages at the top.
Add a dropdown arrow to show that there is a dropdown menu
While not always adhered to, it’s best practice to include a dropdown arrow if an item in a navigation bar will reveal a dropdown menu. This lets the user know what to expect.
Keep responsiveness in mind
When designing primary navigation for websites, you should always consider how it scales down for mobile or scales up for desktop. In a desktop design, you should be able to see all the essential pages, whereas on mobile, you should be able to collapse all the pages under a hamburger menu.
Only put links that will be used often in the top menu
Only links that you expect users to interact with often should be in the primary navigation. All other essential links should sit at the bottom of the page in a footer.
Make your labels direct
Your links’ labels should be as straightforward as possible. You should avoid jargon and keep your labels short and simple.
Choosing what goes in the menu
There are many different schools of thought about how to choose what goes into a menu. Here are a few techniques that you can try to determine what should be in your top navigation.
Sort links according to suspected popularity
Order your links by which ones are used the most often. Once you have ordered them, draw a line separating what should be in the primary navigation and what should be in the footer. There’s no exact rule as to where the line should be drawn, but remember that your top navigation should only include the links your users will use the most often. As a rule of thumb, avoid including more than 7–9 links in your top navigation.
Once you have decided on your top links, test it with users and see if they agree.
Plot links on a matrix
While it’s good to look at what the users will interact with the most often, you may have a business rule or requirement that means you may have to push some pages more than others. If this is the case, plot your links on a matrix and prioritize the ones that users use the most often and the ones that make business sense.
Once you’ve created these groupings, you can decide what’s the most important. You can also test which navigation structure leads to more sales.
Affinity sorting is organizing similar concepts into groups. Unlike the previously discussed methods, this one is better when you have many interactions, like in software or application designs.
To use simplified affinity sorting for navigation, create category groups, then plot the different pages or links into each group. These groups can become the top-level navigation link, and the items in each group can become options in the dropdown menu.
One of the best ways to do affinity sorting is to interview users and ask them how they would group different pages or user journeys.
There are some other variations to menu bars that you can use. One common variation is a link bar.
Pre-made symbols in Balsamiq
Balsamiq offers a wide range of pre-made button controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.
Link bar: A link bar works like a menu bar but can be used as primary navigation or elsewhere like a footer.