Skip to main content

App Bar

A surface that displays at the top of the screen, providing navigation, actions, and text.

Dos and Don'ts

Do
  • Use to display page titles and additional functionality.
  • Follow native iOS scrolling behaviours.
  • Always use iOS app bar relevant to the device you're designing for.
Don't
  • Do not use anywhere other than the top of the screen.
  • Do not use images behind transparent heading text.
  • Never break from the app bar component. It is essential to the product architecture.

Anatomy

Anatomy of an app bar.
  1. Container: Provides a filled or transparent background.
  2. iOS Notch [native]: Native area of non-design that houses device functionality.
  3. iOS Status bar [native]: Native element that displays current device information.
  4. Leading controls (optional): Option of three controls (back, menu, close) to aid user navigation.
  5. Title (optional): Provides an optional heading for the page content.
  6. Secondary text (optional): Provides optional supplementary information.
  7. Divider (only on solid and blur variants): Separates the app bar from content.
  8. Trailing controls (only in title variants): Provides optional overflow menu icon or choice of up to two custom icons to aid user navigation.
  9. Search input (only on search variant): Allows users to search product content; option of placeholder or search text.

Devices

iOS 26 and Liquid Glass is available on iPhone devices ranging from the iPhone 11 series up through the latest iPhone 17, plus the iPhone SE (2nd generation and later). Our app bar component is designed to stay up to date with the latest iPhone model. Currently using notch and status bar for iPhone 17.

Variants

Filled

A filled background provides a tokenised container for the app bar content and titles, which should be used as default.

An app bar with a filled background.

Blurred

Blurred app bars can also be used as an option; these allow the background to be partly visible whilst keeping the text fully accessible. These app bars are best used over photos, illustrations, and other strong imagery.

An app bar with a blurred background.

Transparent

A transparent background allows the page background or image to be fully visible, allowing for more creative app bar solutions. Inverse icon buttons are used in transparent background variants to ensure they are easily visible against any content beneath.

If using the transparent variant above a page background colour, you may need to do additional checks to make sure the text is accessible. If using the transparent app bar above an image, please ensure titles are turned off.

An app bar with a transparent background.
Do
An app bar with inverse icon buttons which are legible on a complex background.
Don't
An app bar with text over a complex background making it difficult to read.

Modifiers

Title

Regular

Use as default to provide screen navigation. Titles may be hidden for certain use cases, but there must always be a title to ensure screen reading accessibility.

An app bar with a regular title.

Prominent

Use when you need to make a title more prominent.

An app bar with a prominent title.

Secondary text

You can add secondary text to the app bar to provide supplementary information for the user.

An app bar with a title and secondary text.

Alignment

Our app bar can use both centre and left alignment for text options. Titles may be hidden for certain use cases, but there must always be a title to ensure screen reading accessibility.

Centre

Use as default to provide screen navigation. If you need 2 or more trailing buttons, we suggest using left-aligned text to allow for more room.

An app bar with a centre aligned title.

Left

Left-aligned text can be used as an option for longer titles and secondary text, or if you need to add two trailing icons.

An app bar with a left aligned title.

Can be used when you need to use high-level search functionality. Use the placeholder option to show placeholder text; use filled to show when a user has entered a string of text.

An app bar with a search box that contains placeholder text.
An app bar with a search box that contains a search string.

Leading controls

Back

Aligns with native behaviour, allowing users to navigate back to the previous screen. An optional label is provided to assist with navigation; this can be turned on or off depending on pillar decisions.

An app bar with a back button.

Close

Aligns with native behaviour, allowing users to close the application or view.

An app bar with a close button.

Allows users to open a side-sheet menu. Used on tablet rather than mobile.

An app bar with a menu button.

Trailing controls

You can use up to two icons in the trailing controls to aid user navigation and provide additional functionality.

Overflow menu

Aligns with native behaviour, allowing users to open a native overflow menu that hides additional functionality. When paired with another icon, the overflow menu always appears to the right.

An app bar with an overflow menu.

Custom icons

We allow up to two custom icons within our trailing controls; these are available only to provide additional functionality to the app bar component.

An app bar containing leading and trailing custom icon buttons.
An app bar containing one leading and two trailing custom icon buttons.

Dual icons

iOS 26 allows for a dual style of Liquid Glass button that combines two icon buttons into one Liquid Glass container.

An app bar containing two trailing icon buttons in a Liquid Glass style container.

Placement

The app bar always sits flush to the top of the screen, and over the page content.

A diagram showing the app bar flush with the top of the screen.

Content

Titles

Titles should be used as default; they should always be clear, succinct, and provide the relevant content to aid a user's navigation of the app.

An app bar with a succinct title.

Overflow text

Text should not go over one line. If it does, the text will truncate — you should avoid this happening by keeping text succinct and testing any translations across devices. Use alternative titles if translations are too long.

An app bar with a long title and secondary text that truncates.
An app bar with a long title and secondary text that truncates.

Search

If placeholder text exceeds the length of the search input container, it will truncate. Please avoid this by keeping placeholder text succinct and by testing placeholder text translations.

String variants should never have overflow solutions. See Behaviours for when a user types a string of text that is longer than the search bar container.

An app bar with a search input field containing a long truncated search string.

Behaviours

Modal is a native iOS navigation pattern that is characterised by a focused workflow appearing from the bottom of the screen, pushing the original view further back.

For more information and animated examples of iOS navigation patterns, please see PIE's Mobile Design System Playbook.

Use modal patterns when you need to show a multi-step workflow or full-screen task. Modals activate from a clicked element in the default view. Leading icons can be used to navigate and dismiss a modal view. You can also dismiss modals by completing the action or task.

Not to be confused with our Modal (Alert) component.
Illustrative example only — not a PIE component.
An example of a native iOS modal.
Do
  • Use modals for multi-step workflows, full-screen tasks, complex or prolonged flows.
Don't
  • Do not use modals for small, focussed tasks that closely relate to a specific element — use an iOS bottom sheet instead.

Scrolling

When scrolling through the page content, the app bar remains sticky at the top of the screen. The background variant is allowed to follow native patterns and use a background blur and opacity.

Currently only documented for engineering purposes; follows native iOS behaviours.
A transparent app bar with scrolling content visible underneath.

We also allow app bar with prominent text to change to non-prominent text upon scrolling, to allow for more space on the screen.

Before and after scrolling showing the change from a prominent to a non-prominent app bar.

When typing, a text cursor (not visible in design) indicates where text will be placed when entered.

If the user inputs a string of text longer than the container, the search input will scroll automatically so the user will continue to see what they are typing.

An app bar with a search input field showing how a long string of text will automatically scroll across when typing.

Overflow menu

Use the native iOS menu component to provide an overflow menu solution. The overflow menu can be activated using the overflow menu icon provided in the trailing controls.

An app bar with an overflow menu revealing more options.

Interactions

Touch targets

Defines the touch targets of interactive elements across variants.

Anatomy of touch target interactions.
  1. Navigation: Navigates to the previous screen, closes a modal stack, or opens a menu.
  2. Select: Allows for selections within the screen.
  3. Clear: Clears a search query.

Examples

LTR examples

Here are some examples of the App bar in a left-to-right context.

An app bar with a non-prominent app bar in left to right context.
An app bar with a prominent app bar in left to right context.
An app bar with a search box in left to right context.

RTL examples

Here are some examples of the App bar in a right-to-left context.

An app bar in a non-prominent variant in right to left context.
An app bar in a prominent variant in right to left context.
An app bar with a search box in right to left context.
Back to top