Balsamiq

Toggle navigation

App bar guidelines

App bars orient users and help them navigate through your platform on mobiles and smaller devices.

Applies to:
App Bar

App bars are used to help users navigate through websites and platforms. They’re usually the primary navigation on mobile sites and the secondary navigation on apps.

App bar icons

To save space on mobile, text links are either collapsed under or replaced by icons. These icons and their “foody” names can often be mixed up, but it is crucial to understand the differences between them.

Hamburger menu

The hamburger menu is the primary navigation that allows users to navigate through your platform. When you click on the icon, it brings up a navigation drawer (usually on the left), which enables you to move to different parts of the site.

The dropdown menu allows you to change the category of the page you are currently on. For example, if you were looking at cat images, you could click the dropdown and switch to dog pictures.

You shouldn’t use this navigation type as primary navigation; it should only be used to change categories.

Kebab or options menu

The kebab menu gives users more options for how they can interact with the page they’re currently on. These interactions can include favoriting, sharing, bookmarking, and more.

Search icon

For some sites, especially e-commerce sites, search functionality is essential in helping users find what they’re looking for. Hence, it should always be available to your user throughout their journey.

A search box will usually take over your app or site’s top bar because of the limited space.

Alternative variations

You can create your own app bar styles using other icons.

Back arrow

The back arrow is usually used when a user has clicked on something to learn more about it. The back arrow allows them to go back to the main screen.

Back arrow with text

This style is seen more on iOS than Android apps. iOS systems tend to center their headings, which leaves some space in which to let the user know where the back arrow will take them.

Deselect button

When selecting multiple items, such as images, your heading bar may change to show you what new options are available.

Best practices

There are a few best practices when it comes to designing app bars.

Only show the most used interactions

Ideally, you would only want to surface everyday interactions and hide the less common ones. By reducing the number of available options, you simplify the users’ journey and the number of decisions they would need to make.

For smaller screen sizes, consider adding extra icons to the options menu

In an ideal world, users would be able to see all the essential options all the time. However, smaller devices and screens just simply don’t allow for that. You can display some of the icons on larger phones and then collapse them into the options menu on smaller ones.

Keep headings as short as possible

Where feasible, keep your heading as short as possible. This will make it easier for users to orient themselves and saves you future headaches when trying to fit everything into the design.

Don’t confuse kebabs, dropdowns, and hamburger icons

While they may not be able to articulate the difference between a hamburger menu and a kebab menu, most users will be familiar with the standard ways these navigational icons are used. To avoid confusion, it’s best to stick to commonly used patterns for navigational icons.

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