Balsamiq

Toggle navigation

Menu Bar and Menu Guidelines

Menus and menu bars contain links and buttons that help users navigate to different pages and features.

Applies to:
Menu
Menu Bar

Types of menu bars

There are a few different types of menus.

Website 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.

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.

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.

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.

Unselected

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.


Best practices

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 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.

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.

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

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.


Variations

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.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.