Chapter 37: Toolbar

Core Idea

A container that groups mixed controls (buttons, links, a toggle group) into one keyboard-navigable strip — think a rich-text editor's formatting bar.

Key Concepts

• Anatomy: Root → any mix of Button, Link, Separator, and ToggleGroup (→ ToggleItem).
• Mixed control types share one roving-tabindex group: buttons, links, and toggle items inside the toolbar all participate in the same arrow-key navigation, regardless of their differing semantics.
• ToggleGroup here is the same primitive as the standalone Toggle Group component, just nested inside a Toolbar for layout/navigation grouping.

Key Takeaways

1. Reach for Toolbar specifically when you're grouping heterogeneous controls (not just a set of toggles — for that alone, plain ToggleGroup is enough) that should share one keyboard navigation group.
2. Separator here is the same primitive as the standalone Separator component — use it to visually group related toolbar controls.
3. loop (default true) and orientation behave the same as other roving-tabindex collections in the library (Tabs, RadioGroup, ToggleGroup).

Connects To

• Toggle Group: the same primitive, usable standalone or nested inside Toolbar.
• Separator: reused here for visual grouping within the toolbar.