Toolbar
The top and bottom bars of a phone screen: navigation, a title, a search field and actions over the content. Desktop layouts have their own composition, so a toolbar never renders from 768px up.
import { Toolbar, ToolbarLeading, ToolbarTitle, ToolbarTrailing } from "@plexui/vue/components/Toolbar";Examples
Toolbar is a phone component: under 768px it renders, from 768px up it takes no space. Each example shows the phone view.
Overview
Titles
titleStyle
titleAlign
Group
Search
Bottom
content
Background
background
Disabled
Sheet
Hosts
A toolbar places itself by its parent:
- In
Page, the top bar covers the content below the device's top safe area, andPageContentstarts below it. The bottom bar stays below the content, which scrolls under it. Under 768px a top toolbar replacesPageHeaderand a bottom toolbar replacesPageFooter, so one page can keep its desktop header and its phone toolbar side by side. - In a
DialogSheet, the top bar starts with the grabber, hides the Sheet's own bar and Close button, and leavesDialogHeaderto name the dialog. Its title is hidden from assistive technology there. A bottom bar replacesDialogFooter.
Put the Back button of a phone screen in the toolbar only. A desktop layout shows its own navigation, such as a sidebar or breadcrumbs.
API
Toolbar
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "top" | "bottom" | "top" | Top bar with 44px targets, or bottom bar with 48px targets |
titleStyle | "inline" | "large" | "compact-large" | "compact-medium" | "inline" | Size and place of ToolbarTitle in a top bar |
titleAlign | "center" | "start" | "center" | Alignment of an inline title. Large and compact titles always start at the leading edge |
background | "soft" | "hard" | "glass" | "solid" | "glass" at the top, "soft" at the bottom | How the bar meets the content scrolled under it, see Background. edge is the earlier name of soft |
class | string | — | Class of the bar |
All other attributes fall through to the bar.
ToolbarTitle
| Prop | Type | Default | Description |
|---|---|---|---|
subtitle | string | — | Second, smaller line below the title. The subtitle slot takes precedence |
as | "h1" | "h2" | "h3" | "h1" | Heading level of the title |
Parts
| Part | Element | Purpose |
|---|---|---|
ToolbarLeading | <div> | Back, Close or menu controls at the leading edge |
ToolbarTitle | <h1> | Title of the screen, with an optional subtitle |
ToolbarContent | <div> | Middle content: a search field, a main action or a segmented control. fill stretches it across the row |
ToolbarGroup | <div role="group"> | Related buttons in one capsule |
ToolbarTrailing | <div> | Actions at the trailing edge |
Styling
Buttons, capsules and the search field in a toolbar use the shared mobile glass of iOS 26: a light fill over a frosted backdrop that turns the content under a control into a smudge, an outline that darkens whatever lies under it, a thin rim of light along the top and bottom edges and a sheen darker at the top and lighter at the bottom. At rest the glass casts no shadow; once content is under the bar, it does. Icons take a 24px box in both bars, labels are 17px medium. NavigationButton keeps its own glyph sizes.
Toolbar reads these component tokens. Override them at any scope to restyle it:
--toolbar-gutter,--toolbar-bottom-gutter: side padding of the top and bottom bars (default16pxand28px)--toolbar-top-item-size,--toolbar-bottom-item-size: button and field height (default44pxand48px)--toolbar-top-item-gap,--toolbar-bottom-item-gap: gap between items (default10pxand12px)--toolbar-group-padding,--toolbar-group-gap: inner padding and spacing of a capsule in the top bar (default2pxand12px;4pxand6pxin the bottom bar)--toolbar-padding-bottom: space below the top row (default10px)--toolbar-sheet-padding-top: space for the grabber in a Sheet (default16px)--toolbar-bottom-padding-top,--toolbar-bottom-padding-bottom: padding of the bottom bar (default4px, and the bottom safe area less6px, at least16px: the 48px items stand 28px above the screen's edge over the 34px home indicator inset, as in iOS 26 Mail and Contacts)--mobile-glass-background,--mobile-glass-sheen,--mobile-glass-shadow,--mobile-glass-shadow-raised,--mobile-glass-backdrop-filter: glass of the buttons, capsules and search field, at rest and with content under the bar--toolbar-title-font-size,--toolbar-large-title-font-size,--toolbar-medium-title-font-size: title sizes (default17px,34pxand22px)--toolbar-large-title-gap: space between the row of controls and a large title (default21px)--toolbar-icon-size,--toolbar-icon-size-sm,--toolbar-search-icon-size: icon boxes of the buttons, of a button withiconSize="sm"and of the search field (default26px,23.56pxand23.75px). A symbol with less ink, asPlusLg, takesiconSize="sm", and a search field takesSearchSm, so they draw the 17.67px plus and the 16.33px magnifier of iOS 26--toolbar-search-gutter,--toolbar-search-icon-gap: space before the magnifier and between it and the text (default10.54pxand6.43px: the magnifier's ink starts 14px into the field and the text's ink at 41.67px)--toolbar-search-font-weight,--toolbar-search-placeholder-color: the search text in Regular (400) and its placeholder in the secondary label color (defaultlight-dark(var(--alpha-40), var(--alpha-60)))--toolbar-background: color of the fading edge and of a hard, glass or solid bar (defaults to the Sheet or page canvas)--page-bar-hard-line: line of a hard bar (defaultlight-dark(rgb(0 0 0 / 12%), var(--color-border)), the iOS 26 kit's Hard edge)--page-bar-line,--page-bar-veil-opacity: hairline and opacity of a glass bar (defaultlight-dark(rgb(0 0 0 / 10%), var(--color-border))andlight-dark(72%, 60%))--toolbar-prominent-disabled-background,--toolbar-prominent-disabled-color: capsule and label of a disabled prominent action (defaultlight-dark(var(--alpha-12), var(--alpha-20))andlight-dark(var(--gray-0), var(--alpha-30))). A disabled glass button keeps the glass and takes--mobile-label-tertiary