Composite
Toolbar Requires JS
Grouped row of action buttons with arrow-key navigation. For editor toolbars, canvas controls, table headers — anywhere a tight cluster of related actions needs roving-tabindex keyboard support.
About
Overview
Toolbars present a row of actions as a single tab-stop. Tab enters the toolbar; arrow keys navigate between actions; Tab again leaves it. This avoids the "press Tab 12 times to get past the formatting bar" anti-pattern.
Live
Demo
<ren-toolbar aria-label="Text formatting">
<button>Undo</button>
<button>Redo</button>
<hr role="separator">
<button aria-pressed="true"><b>B</b></button>
<button aria-pressed="false"><i>I</i></button>
</ren-toolbar>Reference
API
| Class | Effect |
|---|---|
.ren-toolbar | The wrapper. role="toolbar". Inline-flex row with consistent gap. |
.ren-toolbar-separator | Vertical divider. Use a <span> with role="separator". |
.ren-toolbar-group | Optional sub-grouping for related actions inside the toolbar. |
The Web Component handles the roving tabindex automatically — buttons inside <ren-toolbar> get the right tabindex attributes on mount.
Inclusive by default
Accessibility
Keyboard
TabEnter / leave the toolbar.
← / →Move focus between buttons. Wraps at the ends.
Home / EndJump to the first / last button.
Enter / SpaceActivate the focused button.
Always set aria-label on the toolbar so screen readers announce its purpose ("Text formatting toolbar").