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 has 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 sits above the content and has rounded corners. Use it for actions of the current page. It uses position: sticky, so it stays in the page flow and does not cover the end of the content. It is only as wide as its items and keeps 16dp from the edges, 24dp when vertical. Move actions that do 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 uses the surface container colour, 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 be vertical, at the side of a large screen. orientation="vertical" stacks the actions and tells assistive technology that the arrow keys move up and down. Tooltips show on the trailing side, so they do not cover the button above.

<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

Custom property	Description
`--np-toolbar-container-color`	Background.
`--np-toolbar-color`	Icon and text color.
`--np-toolbar-shape`	Corner radius when floating.
`--np-toolbar-elevation`	Shadow when floating.
`--np-toolbar-gap`	Space between actions, 32dp docked and 4dp floating.
`--np-toolbar-inset`	Distance from the edge when floating.

Accessibility

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

Its buttons share one tab stop. Tab moves into the toolbar and out again. The arrow keys move along it, and Home and End jump to the ends. Each button still needs its own title. A text field in the toolbar keeps the arrows, Home and End for its caret. An arrow key leaves the field when the caret is already at that end. 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 share one tab stop, and the arrow keys move between them.

Attribute	Type	Default	Description
`variant`	`'docked' \| 'floating'`	`'docked'`	Full width against an edge, or a rounded bar floating above the content.
`placement`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	Edge a floating toolbar floats at. Ignored when docked.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Direction of the actions and of the arrow keys. Only a floating toolbar can be vertical.
`color`	`'standard' \| 'vibrant'`	`'standard'`	Container colour.

Toolbar

Docked#

Floating#

Vibrant#

Vertical#

Theming#

Accessibility#

API#