Toolbar

Disclosure & Layout · Guide 7 of 46

Purpose

Groups controls behind one roving tab stop.

<script lang="ts">
	import { Toolbar } from 'bits-ui';
</script>

The registry names Toolbar as this guide’s namespace. Copy the exact root and part composition from the live demo rather than guessing part names.

Keep the reading and focus order logical with styles disabled.
Preserve keyboard behavior and control-to-content relationships for interactive parts.
Check constrained widths, overflow, and reduced-motion behavior.

After using the local example, consult the upstream Bits UI reference for exhaustive API details.