Toolbars

Toolbars display frequently used actions relevant to the current page. There are four, from two independent axes — a shape (floating or docked) and a color style (standard or vibrant). They can hold buttons, icon buttons, and text fields, and a floating bar can sit next to a FAB. Do not show a toolbar at the same time as a navigation bar.

A <div class="toolbar"> is the bar — not a <nav>, because a toolbar holds commands rather than destinations. Direct <button> or <a> children are the actions. A <span class="material-symbols" aria-hidden="true"> is the icon; wrap a label in its own <span>, and give an icon-only action an aria-label. .active marks the selected action. .filled on an action is the emphasized control. They are CSS only — nothing to AutoInit.

Floating is the default shape and standard the default color, so neither needs a class — but floating and standard are both accepted, so a bar can name all of what it is. filled is the older name for vibrant, and max the BeerCSS name for docked; both still work.

Tokens follow the 34.0.21 sets md.comp.toolbar.{standard, vibrant, docked, floating, floating.fab}, behind the M3 toolbar spec. Actions are 48dp targets with a 24dp icon, transparent at rest, on-surface-variant, 4dp apart.

This is not the FAB-to-toolbar transition (div.fixed-action-btn.toolbar). That stays on Floating Action Button.

Floating

The default shape. It hugs its actions — 64dp tall, 32dp stadium corners, elevation 3, 8dp end insets — and sits 16dp from the viewport edge when fixed. Horizontal or vertical. It can hold many controls, and it can sit next to a FAB.

<div class="toolbar">
  <button type="button" aria-label="Stop camera">
    <span class="material-symbols" aria-hidden="true">videocam_off</span>
  </button>
  <button type="button" class="active" aria-label="Hand">
    <span class="material-symbols" aria-hidden="true">back_hand</span>
  </button>
  <button type="button" aria-label="More">
    <span class="material-symbols" aria-hidden="true">more_vert</span>
  </button>
</div>

A label next to the icon needs a <span> — :only-child ignores text nodes, so <span class="material-symbols">edit</span>Edit would look icon-only. .filled on an action is the emphasized control (16dp corners, primary).

<div class="toolbar">
  <button type="button" aria-label="Undo">
    <span class="material-symbols" aria-hidden="true">undo</span>
  </button>
  <button type="button" class="filled" aria-label="Add">
    <span class="material-symbols" aria-hidden="true">add</span>
  </button>
  <button type="button" aria-label="More">
    <span class="material-symbols" aria-hidden="true">more_vert</span>
  </button>
</div>

Color

Standard is surface-container with on-surface-variant content and a secondary-container selection. vibrant is primary-container / on-primary-container — use it when the bar needs more emphasis — and selection moves to surface-container / on-surface so it still reads against the accent. Either shape takes either color.

The vibrant attribute is a different thing, and the bar deliberately does not answer to it as a class. That attribute is the emphasis foundation, whose one ramp is tertiary; a bar inside it — or carrying it — is repainted by the foundation alone, with no toolbar-specific code, because every colour above is a token pointed at a --md-sys-color-* role. Nothing collides: selection is secondary-container, which the foundation leaves alone.

<div class="toolbar vibrant">…</div>

Vertical

vertical stacks the actions. Only floating bars go vertical — a docked bar stays a horizontal strip.

<div class="toolbar vertical">…</div>

Docked

docked (the M3 name; max is the BeerCSS alias) stretches the bar to the full width, drops the stadium and the elevation, takes 16dp end insets, and spaces the actions between 4dp and 32dp apart as the bar widens. It replaces the bottom app bar: same job, shorter (64dp, not 80). Use it for page actions; destinations belong on a navigation bar, and the two should not appear together. A child .max is a spacer, not the bar.

Text actions and a spacer:

<div class="toolbar docked">
  <button type="button" aria-label="Download">
    <span class="material-symbols" aria-hidden="true">download</span>
  </button>
  …
</div>

<div class="toolbar docked">
  <button type="button"><span>Back</span></button>
  <span class="max"></span>
  <button type="button" class="filled"><span>Next</span></button>
</div>

Pairing with a FAB

Wrap the toolbar and a sibling .extra.circle FAB in .toolbar-group. The FAB stays a FAB — 56dp, 16dp corners — and sits 8dp from the bar, lifted one level where the bar is lifted three. Its color follows the bar's color style: secondary-container beside a standard bar, tertiary-container beside a vibrant one, so you mark only the bar. That is the companion FAB, not the in-bar .filled action.

<div class="toolbar-group">
  <div class="toolbar vibrant">…</div>
  <button type="button" class="extra circle" aria-label="Reply">
    <span class="material-symbols" aria-hidden="true">reply</span>
  </button>
</div>

Fixed

fixed pins the bar to the viewport, inset by its own external space. A floating bar sits 16dp from the bottom-center; add top to move it to the top. A vertical bar sits 24dp from the start edge; right flips it. A docked bar sticks to the bottom edge; top sticks it to the top.

<div class="toolbar fixed">…</div>
<div class="toolbar vertical fixed">…</div>
<div class="toolbar docked fixed">…</div>

Tokens