Toolbar
The toolbar component implements the Material 3 app bar pattern. It supports a docked (attached) variant for bottom-panel navigation and a floating (detached pill-shaped) variant. The floating variant supports both horizontal and vertical orientations.
Render toolbar actions directly as children of the component. The docked variant is optimized for a horizontal action row, while the floating variant supports both horizontal and vertical layouts.
Usage
A docked toolbar behaves like a mobile bottom panel. Render actions directly as children, with one tonal action to indicate the current or emphasized destination.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-toolbar>
<wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
</div>
Variants
Docked
The default variant. A full-width bar that sits attached to the bottom edge like a mobile
navigation panel. Pair it with elevated to add separation from the content above.
<div style="width: 100%; overflow: hidden; border-radius: 0.5rem;">
<wc-toolbar elevated="true">
<wc-icon-button variant="text"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
</div>
Floating
A detached pill-shaped toolbar that floats over content. Suitable for persistent actions in full-bleed layouts such as maps or canvases.
<wc-toolbar variant="floating">
<wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
Floating toolbar
Horizontal (default)
Items flow left-to-right in the default horizontal orientation.
<wc-toolbar variant="floating" orientation="horizontal">
<wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
Vertical
Set orientation="vertical" to stack items top-to-bottom. Ideal for side-docked
floating action bars.
<wc-toolbar variant="floating" orientation="vertical">
<wc-icon-button variant="tonal"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
Sizes
The size attribute controls the height of a docked toolbar. Larger sizes add more
vertical breathing room while keeping the same action-row layout.
<div style="width: 100%; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; border-radius: 0.5rem;">
<wc-toolbar size="small">
<wc-icon-button variant="text" color="dark"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
<wc-toolbar size="medium">
<wc-icon-button variant="text" color="dark"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
<wc-toolbar size="large">
<wc-icon-button variant="text" color="dark"><wc-icon name="home"></wc-icon></wc-icon-button>
<wc-icon-button variant="tonal"><wc-icon name="search"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="favorite"></wc-icon></wc-icon-button>
<wc-icon-button variant="text" color="dark"><wc-icon name="account_circle"></wc-icon></wc-icon-button>
</wc-toolbar>
</div>
On this page
Usage Variants Floating toolbar Sizes