Toolbars

A toolbar appears at the bottom of a screen and contains buttons for performing actions relevant to the current view. By default, a toolbar is translucent: It uses a background material only when content appears behind it, removing the material when the view scrolls to the bottom. A toolbar hides when a keyboard is onscreen.

A screenshot of the Mail app on iPhone, showing mailboxes listed in two groups of rows. The lower group extends below the toolbar at the bottom of the screen. The toolbar’s background is a lighter gray than the list background and the top horizontal edge of the toolbar uses a visible gray outline that’s visible against the bottom row.

The Mail toolbar uses a background material to distinguish itself from the mailboxes behind it.

A screenshot of the Mail app on iPhone, showing mailboxes listed in two groups of rows. The content has been scrolled down, so that the lower group rests well above the toolbar. The toolbar is translucent, which makes the list background visible behind it.

When no mailboxes appear behind the toolbar, the background material doesn’t appear.

For developer guidance, see UIToolbar.

TIP Although toolbars and tab bars both appear at the bottom of a screen, each has a different purpose. A toolbar contains buttons for performing actions related to the screen, such as creating an item, filtering items, or marking up content. A tab bar lets people navigate among different areas of an app, such as the Alarm, Stopwatch, and Timer tabs in the Clock app. Toolbars and tab bars don’t appear together in the same view.

Use a toolbar to elevate a small number of actions that people are most likely to perform in the current context. A toolbar provides a prominent and consistent location for frequently used commands. If you need to provide a way to switch contexts, consider using a tab bar instead.

In an iPadOS app, consider using a navigation bar instead of a toolbar for frequently used actions. Buttons at the top of the iPad screen are more prominent than those at the bottom, and they can be easier for people to reach. For guidance, see Navigation Bars.

In a toolbar that contains three or fewer buttons, consider using concise text titles for additional clarity. For example, Calendar uses the titles Today, Calendars, and Inbox. To ensure that the titles don’t run together, you can insert fixed spaces between the buttons. For developer guidance, see UIBarButtonSystemItemFixedSpace.

A

In a toolbar that has more than three buttons, consider using SF symbols to conserve space. SF Symbols provides a wide range of customizable symbols you can use to represent actions in your app. If you need to create a custom glyph for a toolbar button, use the following sizes, adjusting as needed for balance. For guidance, see Glyphs.

Target size Maximum size
24x24 pt (72x72 px @3x) 28x28 pt (84x84 px @3x)
24x24 pt (48x48 px @2x) 28x28 pt (56x56 px @2x)

Avoid using a segmented control in a toolbar. Segmented controls let people switch contexts, whereas a toolbar’s actions are specific to the current screen.