Toolbar

Frequently used actions for the current page. A toolbar replaces the bottom app bar, which Material 3 Expressive deprecated.

Docked#

A docked toolbar spans the full width of its container and sits flush against an edge. Use it for actions that stay the same from page to page. It keeps 16dp at the edges and 32dp between its items; in a window narrower than 600px the items spread evenly across it.

<script lang="ts">
	import { IconButton, Toolbar } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<div style="width:26rem;max-width:100%;border-radius:1rem;overflow:hidden">
	<Toolbar aria-label="Document actions">
		<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
		<IconButton title="Search"><Icon>search</Icon></IconButton>
		<IconButton title="Share"><Icon>send</Icon></IconButton>
		<IconButton title="Delete"><Icon>delete</Icon></IconButton>
	</Toolbar>
</div>

Floating#

A floating toolbar hovers above the content as a rounded island. Use it for actions that belong to the page you are on. It is position: sticky, so it stays in flow and never covers the end of the content. It is only as wide as its items and stays 16dp clear of the edges, 24dp when vertical. Move what does not fit into an overflow menu.

<script lang="ts">
	import { IconButton, Toolbar } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<div
	style="width:26rem;max-width:100%;border-radius:1rem;padding:1rem;background:var(--np-color-surface-container-low)"
>
	<Toolbar variant="floating" aria-label="Page actions">
		<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
		<IconButton title="Search"><Icon>search</Icon></IconButton>
		<IconButton title="Share"><Icon>send</Icon></IconButton>
	</Toolbar>
</div>

Vibrant#

color="vibrant" gives a docked or floating toolbar the primary container colour. An unselected tonal toggle then turns surface container, so it stands out from the toolbar.

<script lang="ts">
	import { IconButton, Toolbar } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<div
	style="width:26rem;max-width:100%;border-radius:1rem;padding:1rem;background:var(--np-color-surface-container-low)"
>
	<Toolbar variant="floating" color="vibrant" aria-label="Page actions">
		<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
		<IconButton title="Search"><Icon>search</Icon></IconButton>
		<IconButton title="Share"><Icon>send</Icon></IconButton>
	</Toolbar>
</div>

Vertical#

A floating toolbar can stand upright, at the side of a large screen. orientation="vertical" stacks the actions and tells assistive technology the arrows move up and down rather than left and right. Tooltips move to the trailing side, since above a stacked button is where the button before it sits.

<script lang="ts">
	import { IconButton, Toolbar } from 'noph-ui'
	import { Icon } from 'noph-ui/icons'
</script>

<div style="border-radius:1rem;padding:1rem;background:var(--np-color-surface-container-low)">
	<Toolbar variant="floating" orientation="vertical" placement="end" aria-label="Page actions">
		<IconButton title="Favorite"><Icon>favorite</Icon></IconButton>
		<IconButton title="Search"><Icon>search</Icon></IconButton>
		<IconButton title="Share"><Icon>send</Icon></IconButton>
	</Toolbar>
</div>

Theming#

Accessibility#

The toolbar renders role="toolbar" with aria-orientation set from orientation. Give it an aria-label, Text formatting for instance, because a toolbar without a name is announced as a nameless group of buttons.

Its buttons share one tab stop, the way the ARIA pattern asks: Tab moves into the toolbar and out again, the arrow keys move along it, and Home and End jump to the ends. Each button inside still needs its own title. A text field in the toolbar keeps the arrows, Home and End for its caret; the arrows leave it once the caret reaches the end it moves towards. A select keeps the up and down arrows for its value.

API#

Renders a <div role="toolbar"> and takes its attributes. Give it an aria-label. The actions form a single tab stop with the arrow keys moving between them, so a toolbar does not add one tab stop per button.