toc

Toolbar

A toolbar holds actions that relate to the content on the screen, docked to an edge or floating above it.

format_bold

format_italic

format_underlined

<md-gb-toolbar aria-label="Text formatting">
  <md-gb-icon-button aria-label="Bold"><md-gb-icon>format_bold</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button aria-label="Italic"><md-gb-icon>format_italic</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button aria-label="Underline"><md-gb-icon>format_underlined</md-gb-icon></md-gb-icon-button>
</md-gb-toolbar>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-toolbar.json (setup)

Usage guidelines

Link to “Usage guidelines”

Actions for the page. A toolbar offers actions related to the current page and can show more of them in larger windows.
Docked or floating. A docked toolbar spans the window and suits global actions that stay the same across pages. A floating toolbar hovers over the content and suits actions for that content.
Vibrant for emphasis. Use the vibrant color for more emphasis.
Not with a navigation bar. Don't show a toolbar at the same time as a navigation bar.

Anatomy

Link to “Anatomy”

A toolbar holds actions, such as buttons and icon buttons. A floating toolbar can have a FAB.

attach_file

Draft

delete

send

<md-gb-toolbar aria-label="Compose actions">
  <md-gb-icon-button slot="leading" aria-label="Attach"><md-gb-icon>attach_file</md-gb-icon></md-gb-icon-button>
  <md-gb-button>Draft</md-gb-button>
  <md-gb-icon-button slot="trailing" aria-label="Delete"><md-gb-icon>delete</md-gb-icon></md-gb-icon-button>
  <md-gb-fab slot="fab" aria-label="Send"><md-gb-icon>send</md-gb-icon></md-gb-fab>
</md-gb-toolbar>

Examples

Link to “Examples”

Colors

Link to “Colors”

Toolbars are standard by default. Set color="vibrant" for a more prominent toolbar.

undo

redo

<md-gb-toolbar color="vibrant" aria-label="Editing">
  <md-gb-icon-button aria-label="Undo"><md-gb-icon>undo</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button aria-label="Redo"><md-gb-icon>redo</md-gb-icon></md-gb-icon-button>
</md-gb-toolbar>

Docked

Link to “Docked”

Add docked to stretch the toolbar across the full width of its container.

undo

redo

<md-gb-toolbar docked aria-label="Editing">
  <md-gb-icon-button aria-label="Undo"><md-gb-icon>undo</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button aria-label="Redo"><md-gb-icon>redo</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button aria-label="Share"><md-gb-icon>share</md-gb-icon></md-gb-icon-button>
</md-gb-toolbar>

Buttons with labels

Link to “Buttons with labels”

Toolbars can hold buttons with labels as well as icon buttons. Use toggle buttons to show a selected state.

edit Edit

palette Style

<md-gb-toolbar aria-label="View">
  <md-gb-button type="toggle" selected>
    <md-gb-icon>edit</md-gb-icon>
    Edit
  </md-gb-button>
  <md-gb-button type="toggle">
    <md-gb-icon>palette</md-gb-icon>
    Style
  </md-gb-button>
</md-gb-toolbar>

Orientation

Link to “Orientation”

Set orientation="vertical" to stack the actions in a column.

brush

ink_eraser

<md-gb-toolbar orientation="vertical" aria-label="Tools">
  <md-gb-icon-button aria-label="Draw"><md-gb-icon>brush</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button aria-label="Erase"><md-gb-icon>ink_eraser</md-gb-icon></md-gb-icon-button>
</md-gb-toolbar>

With a FAB

Link to “With a FAB”

A floating toolbar can sit beside a FAB in the fab slot. Set fab-position="start" to move it to the leading side, or expanded="false" to collapse the toolbar to just the FAB.

attach_file

image

send

<md-gb-toolbar aria-label="Compose actions">
  <md-gb-icon-button aria-label="Attach"><md-gb-icon>attach_file</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button aria-label="Insert photo"><md-gb-icon>image</md-gb-icon></md-gb-icon-button>
  <md-gb-fab slot="fab" aria-label="Send"><md-gb-icon>send</md-gb-icon></md-gb-fab>
</md-gb-toolbar>

Overflow

Link to “Overflow”

Add overflow-menu to move trailing actions that don't fit into a "More actions" menu.

download

delete

<md-gb-toolbar overflow-menu aria-label="Document actions" style="max-inline-size: 200px">
  <md-gb-icon-button aria-label="Print"><md-gb-icon>print</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button slot="trailing" aria-label="Share"><md-gb-icon>share</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button slot="trailing" aria-label="Download"><md-gb-icon>download</md-gb-icon></md-gb-icon-button>
  <md-gb-icon-button slot="trailing" aria-label="Delete"><md-gb-icon>delete</md-gb-icon></md-gb-icon-button>
</md-gb-toolbar>

Hide on scroll

Link to “Hide on scroll”

Set scroll-behavior="hide" to move a docked or floating toolbar off screen when the page scrolls down and bring it back when it scrolls up. scroll-target names the element that scrolls; it defaults to the window.

Scroll this page down to hide the toolbar and up to bring it back.

Bread, milk, eggs, butter, cheese, apples, rice, beans, flour, sugar.

Coffee, tea, honey, oats, lentils, pasta, tomatoes, onions, garlic.

Lemons, limes, oranges, bananas, grapes, pears, plums, peaches, figs.

undo

HTML

CSS

<div id="page">
  <p>Scroll this page down to hide the toolbar and up to bring it back.</p>
  <p>Bread, milk, eggs, butter, cheese, apples, rice, beans, flour, sugar.</p>
  <p>Coffee, tea, honey, oats, lentils, pasta, tomatoes, onions, garlic.</p>
  <p>Lemons, limes, oranges, bananas, grapes, pears, plums, peaches, figs.</p>
  <md-gb-toolbar docked scroll-behavior="hide" scroll-target="page" aria-label="Page actions">
    <md-gb-icon-button aria-label="Undo"><md-gb-icon>undo</md-gb-icon></md-gb-icon-button>
    <md-gb-icon-button aria-label="Share"><md-gb-icon>share</md-gb-icon></md-gb-icon-button>
  </md-gb-toolbar>
</div>

#page {
  block-size: 200px;
  overflow-y: auto;
  padding-inline: 16px;
}
#page md-gb-toolbar {
  position: sticky;
  inset-block-end: 0;
}
#page p {
  margin-block: 56px;
}

Accessibility

Link to “Accessibility”

A toolbar has the toolbar role. Label it with aria-label or aria-labelledby.
Every action stays in the Tab order, and the arrow keys also move between them (up and down in a vertical toolbar).
Icon-only actions need an aria-label.
A collapsed toolbar makes its hidden actions inert.

Compatibility

Link to “Compatibility”

Material Design 3Spec checked83% tokens

71 of 253 buildable spec units are tested, 23 are excluded with a written reason and 0 are uncovered (the target is 0). 52 of 63 token declarations match the spec (83%), and 11 have no spec token.

toolbars on m3.material.io (opens in a new tab) How compliance is measured

BaselineWidely availableChrome 124Edge 124Firefox 125Safari 17.4

The component’s own CSS and JavaScript rely only on web platform features that are Baseline widely available: it works in Chrome 124, Edge 124, Firefox 125, Safari 17.4 and later.

Newer features it uses where the browser has them (progressive enhancements):

interpolate-size (opens in a new tab) Limited availability degrades safely where it is missing
user-select (opens in a new tab) Limited availability used inside an @supports guard

Browser support Learn more about Baseline (opens in a new tab)

WAI-ARIAaxe and ARIA 1.3 passButtonToolbar

Roles the component renders: button (opens in a new tab), toolbar (opens in a new tab).

Follows the WAI-ARIA Authoring Practices: Button (opens in a new tab), Toolbar (opens in a new tab).

1 rendered state run through axe-core and the WAI-ARIA 1.3 role and attribute rules in a real browser, with no known gaps.

WAI-ARIA 1.3 (opens in a new tab) ARIA Authoring Practices (opens in a new tab) Accessibility

Lighthouse96 · 100 · 100 · 100

Performance
Accessibility
Best practices
SEO

Audits under 90:

Largest Contentful Paint
Largest Contentful Paint element
Elements with visible text labels do not have matching accessible names.
Eliminate render-blocking resources
Minify JavaScript
Reduce unused JavaScript
Enable text compression
Network dependency tree
Render blocking requests

Lighthouse 12.8.2 (desktop, 2026-11-08) on the component alone: its first example on a page of its own, without this site's shell. The modules are the development build (not bundled or minified), so the performance score is indicative.

Open the test page About Lighthouse (opens in a new tab)

API reference

Link to “API reference”

<md-gb-toolbar>

Link to “<md-gb-toolbar>”

A Material Design gBreeze toolbar custom element.

Properties

Link to “Properties”

Property	Attribute	Type	Default
`color` The color scheme of the toolbar.	`color`	`ToolbarColor`	`'standard'`
`docked` Whether the toolbar is docked across full width.	`docked`	`boolean`	`false`
`expanded` Whether a floating toolbar with a FAB shows its items. When `false`, the toolbar collapses and its FAB grows to the medium size (Compose floating toolbar `expanded`). Set `expanded="false"` from markup.	`expanded`	`boolean`	`true`
`fabPosition` Which side of a floating toolbar the FAB is on (`end` or `start`).	`fab-position`	`"start"`	"end"
`orientation` The layout orientation.	`orientation`	`ToolbarOrientation`	`'horizontal'`
`overflowMenu` Whether trailing actions that do not fit move into an overflow menu in the trailing slot (toolbars.md, Adaptive design). On by itself when an `overflow` slot trigger is provided; this turns it on with the default "More actions" button.	`overflow-menu`	`boolean`	`false`
`scrollBehavior` How a docked or floating toolbar reacts to scrolling: `hide` slides it beyond the bottom edge when the page scrolls down and back on scroll up (toolbars.md: docked and floating toolbars "can animate offscreen").	`scroll-behavior`	`"hide"`
`scrollTarget` The id of the element whose scrolling drives `scroll-behavior`. Defaults to the window.	`scroll-target`	`string`	`''`

Slots

Link to “Slots”

Slot	Description
default	Used to display toolbar items (buttons, icon buttons, or custom content).
`fab`	An optional FAB (`md-gb-fab`) shown next to a floating toolbar, colored by the toolbar's `color` (standard: secondary container, vibrant: tertiary container).
`leading`	Used to display leading toolbar items.
`trailing`	Used to display trailing toolbar items.

CSS parts

Link to “CSS parts”

Part	Description
`::part(toolbar)`	The toolbar's root container.
`::part(toolbar-with-fab)`	The toolbar and FAB layout, with a FAB.

CSS custom properties

Link to “CSS custom properties”

Property	Description
`--button-container-color`
`--container-color`
`--container-elevation`
`--container-leading-space`
`--container-shape`
`--container-spacing`
`--container-trailing-space`
`--docked-container-elevation`
`--docked-container-height`
`--docked-container-leading-space`
`--docked-container-max-spacing`
`--docked-container-min-spacing`
`--docked-container-shape`
`--docked-container-trailing-space`
`--horizontal-container-height`
`--icon-color`
`--label-text-color`
`--min-button-size`
`--motion-duration`
`--motion-easing`
`--selected-button-container-color`
`--selected-icon-color`
`--selected-label-text-color`
`--vertical-container-width`

Toolbar

Usage guidelines

Anatomy

Examples

Colors

Docked

Buttons with labels

Orientation

With a FAB

Overflow

Hide on scroll

Accessibility

Compatibility

API reference

<md-gb-toolbar>

Properties

Slots

CSS parts

CSS custom properties

Download & copy

Download

Copy

Customize theme