Bars

A navigation bar sits across the top of a screen and carries its title and its actions. A toolbar floats at the bottom and holds the actions that operate on what is showing.

When to use them

Use a navigation bar on every screen that has a title, which is nearly all of them. It is where people look to find out where they are and how to get back.

Use a toolbar for actions that apply to the current screen: share, delete, add, filter. Use a tab bar instead when the buttons move between sections rather than doing something. An app can carry both, and they sit on the same glass so they read as one material.

Navigation bars

A navigation bar has no background of its own. The title floats over the content, and every control is its own piece of glass: a 44px circle with a dark glyph.

<header class="p-nav-bar">
<div class="p-nav-bar__row">
  <button class="p-nav-bar__button p-nav-bar__back" type="button" aria-label="Back">
    <i class="ph-bold ph-caret-left"></i>
  </button>
  <button class="p-nav-bar__button" type="button">Edit</button>
</div>
<h1 class="p-nav-bar__large">Library</h1>
</header>

The large and medium titles are the only places in iOS with positive tracking. Everything else at 17px and above tightens; at 28px and 34px SF Pro opens back up. Getting this wrong is the fastest way to make a header look not-quite-right.

A large or medium title takes its own row under the controls and is left aligned. The compact title sits in the control row and is centered.

A text label turns a button into a capsule, which is how Edit and Done look. Put several controls on one side in a .p-nav-bar__group, and a group of related glyph buttons in a .p-toolbar-touch capsule, which shrinks to the bar’s 44px size.

<header class="p-nav-bar">
<div class="p-nav-bar__row">
  <button class="p-nav-bar__button p-nav-bar__back" type="button" aria-label="Back">
    <i class="ph-bold ph-caret-left"></i>
  </button>
  <h1 class="p-nav-bar__title">Albums</h1>
  <button class="p-nav-bar__button p-nav-bar__button-prominent" type="button" aria-label="Add">
    <i class="ph-bold ph-plus"></i>
  </button>
</div>
</header>

The control row is a three-column grid, so the title is centered on the bar rather than on the space the controls leave over. A bar with one control on the left still centers its title.

Wrap a title and subtitle in .p-nav-bar__titles when the screen needs both. The title drops to 15px and the subtitle sits under it at 12px.

Use one prominent button per bar, for the screen’s primary action. It is a solid accent circle rather than glass, so it outranks everything around it.

Leading titles

Add .p-nav-bar-leading to put the title right after the back button, 12px from it and left aligned, with the trailing controls pushed to the far end. It suits screens reached by drilling in, where the title names the thing opened. The medium title fits inline here too.

<header class="p-nav-bar p-nav-bar-leading">
<div class="p-nav-bar__row">
  <button class="p-nav-bar__button p-nav-bar__back" type="button" aria-label="Back">
    <i class="ph-bold ph-caret-left"></i>
  </button>
  <span class="p-nav-bar__titles">
    <span class="p-nav-bar__medium">Inbox</span>
    <span class="p-nav-bar__subtitle">12 unread</span>
  </span>
  <button class="p-nav-bar__button" type="button" aria-label="Filter">
    <i class="ph-bold ph-funnel"></i>
  </button>
</div>
</header>

The filled bar

.p-nav-bar-filled brings back the iOS 26 bar: a full-width translucent strip, rgba(255,255,255,0.65) light and rgba(40,40,42,0.65) dark at blur 30px, behind the row. Plain accent text actions, .p-nav-bar__action, still work on it. Add .p-nav-bar-bordered for a hairline under either style when the bar sits over scrolling content.

<header class="p-nav-bar p-nav-bar-filled p-nav-bar-bordered">
  <div class="p-nav-bar__row">
    <button class="p-nav-bar__action" type="button">Back</button>
    <h1 class="p-nav-bar__title">Albums</h1>
    <button class="p-nav-bar__action" type="button">Edit</button>
  </div>
</header>

Toolbars

<div class="p-toolbar-touch">
<button class="p-toolbar-touch__item" type="button" aria-label="Share">
  <i class="ph-bold ph-export"></i>
</button>
<button class="p-toolbar-touch__item" type="button" aria-label="Delete">
  <i class="ph-bold ph-trash"></i>
</button>
</div>

The toolbar hugs its content rather than spanning the screen. Glyphs are dark, not the accent: in iOS 27 only the prominent action carries color, so it is the one people find first.

An item with a label instead of a glyph grows into a capsule automatically, through :not(:has(> i, > svg)). The markup is the same either way.

Use .p-toolbar-touch__divider to separate groups inside one capsule, and a second .p-toolbar-touch when the groups should read as separate objects.

Add .p-toolbar-touch-fixed to float it 12px above the bottom edge, or above the home indicator where there is one. Content scrolls visibly underneath, so give the scrolling region bottom padding.

An icon-only item carries no text, so it needs an aria-label.

Search in a bar

.p-bar-search is a glass search capsule for a toolbar, 180 x 44px as it sits in an iPad toolbar beside the trailing buttons. Set --p-bar-search-width and --p-bar-search-height for other sizes, such as 190 x 48px at the bottom of an iPhone screen.

<label class="p-bar-search">
<i class="ph-bold ph-magnifying-glass"></i>
<input type="search" placeholder="Search" aria-label="Search">
<i class="ph-bold ph-microphone"></i>
</label>

The caret takes the accent. The trailing glyph, dictation or clear, is #727272. Focus adds the standard focus ring around the capsule.

The three bars together

An app’s navigation bar, toolbar, and tab bar all read the same small-glass tokens from materials.css: --p-glass-tint for the fill, --p-glass-edge for the keyline and rim, --p-shadow-glass-control for the shadow. Changing the glass changes the set.

Do not put a toolbar and a tab bar at the bottom at the same time. iOS picks one. Two floating capsules stacked at the bottom of a phone is most of the reachable area gone.

Dark mode

The glass follows the small-glass tint, which is nearly clear in dark mode. Titles and glyphs move from #1A1A1A to #F5F5F5, subtitles to #8A8A8A, and the accent from #0088FF to #0091FF.

Accessibility

Use <header> for the navigation bar and a real heading element for the title, so the page outline matches what people see.

The navigation bar pads for env(safe-area-inset-top), which is where the status bar and the notch live. The toolbar clears the home indicator through env(safe-area-inset-bottom) with a 12px floor.

Every button is at least 44px, and every glyph-only button needs an aria-label.

Without a bar behind it, a title sits directly over the content, so keep the content under the title from scrolling behind it, or use .p-nav-bar-filled. Reduced transparency and browsers without backdrop-filter get opaque buttons. Forced colors hands the bars to the system palette with LinkText on the controls.

The macOS toolbar

toolbars.css ships both. .p-toolbar-group and .p-toolbar-btn are the macOS toolbar, which lives in a window’s title bar and is sized for a pointer. .p-toolbar-touch is this one. They share a file and nothing else.