iOS Navigation Bar Design Guide
By: Rita Tavares
Tags: Design, UI Design, Figma, iOS, Design Systems

A navigation bar is usually placed at the top of the view, below (1.) the Status Bar, and contains 3 main components: (2.) a left item, (3.) a title, and (4.) a right item(s) (both 2. and 4. are optional).

This bar provides hierarchical navigation between views, and is one of the ways to prevent the user from getting lost inside an app. The navigation bar can be paired with (5.) a Search Controller and (6.) a Scope Indicator.

1. Status Bar

The Status Bar displays contextual information about the device, and it appears on the upper edge of the view. The elements that are usually in use are the time, the cellular carrier, the wifi connection symbol, and the battery level, but this information is influenced according to the device.

When designing, avoid using a custom status bar, since the system one is recognizable for everyone, and it feels consistent throughout all apps. The Status Bar can toggle between two states, light and dark, so choose the one that is more readable depending on the background. This bar should be visible most of the time (avoid hiding it permanently) since the user has to exit the app to consult the information that is displayed there.

2. Left button

This button is the easy path for the user to return to their previous location and it’s usually named after the view the user will go back to. It can also be named “Back”, but specifying the name of the previous view will make the path clearer.

3. Title

The navigation bar’s title displays the current position of the user which provides a little bit more context about what is being presented. However, the title can be hidden if it feels redundant or highlighted by using the large style, according to the content of the view.

4. Right button

The buttons that are placed on the right, can assist in managing and affecting the whole view, and they can be comprised of label or symbol buttons. The symbol buttons are usually about editing, sharing or adding options, but although it’s possible, consider not crowding this space with a lot of controls, since the space is limited and the user might lose focus. The label buttons that are usually used are “Edit”, “Done”, “Cancel” or “Close” (in this case only one should be selected)

5. Background

The default background of a navigation bar is a material (it is transparent and has a blur effect) and it shouldn’t be hidden, since it allows for the content to scroll seamlessly behind it. Disabling it is not advised since it will affect some accessibility options.

6. Search Controller

A Search Controller allows users to perform a search that is influenced by the content typed and can be displayed alone or in a Navigation Bar. When used in a Navigation Bar, it can be pinned to it and accompany the scroll or it can be hidden and only accessed with a swipe down. The Clear Button should be enabled to facilitate the content being erased faster. The Cancel Button should also be enabled to exit the search anytime.

7. Scope Indicator

A Scope Indicator contains two or more segments that can be helpful to separate the different categories in which to search. The number of segments should be no more than 3, considering the adaptability to smaller devices. The content should be consistent, meaning that all the options should occupy almost the same width of the segment.

Wrap up

We hope this can help you learn and avoid some mistakes on your journey. Feel free to visit our Navigation Bar Figma library. A huge thank you to the other Air Apps team members who contributed to the Figma library, Carmine Acierno and Yugi Aragão.

Leave us a comment if you have any questions. Or contact us at business@airapps.com

Thank you!