rc-toolbar
Toolbar that groups consumer-supplied controls into one tab stop with arrow-key navigation, following the WAI-ARIA Toolbar pattern.
- Package
@rcarls/rc-toolbar- Element
<rc-toolbar>- Native dependency
- Consumer supplies toolbar controls
- State model
- Roving focus only
- Main events
- None
Installation
- npm
- Yarn
- pnpm
npm install @rcarls/rc-webcomponents@next
yarn add @rcarls/rc-webcomponents@next
pnpm add @rcarls/rc-webcomponents@next
import '@rcarls/rc-webcomponents/rc-toolbar/define';
Usage
Place buttons, toggles, selects, or other focusable controls as direct children, and name the
toolbar with label. Elements that cannot take focus, such as separators, render but are
skipped during keyboard navigation.
<rc-toolbar label="Formatting">
<button type="button">Bold</button>
<button type="button">Italic</button>
<hr aria-hidden="true" />
<button type="button">Align left</button>
<button type="button">Align right</button>
</rc-toolbar>
Live demo
Direct rc-button and rc-chip children participate through their native child
buttons, so themed controls keep the toolbar's single roving tab stop. Icon-only
buttons should use data-rc-button-icon inside the native button so button and
theme geometry remain synchronized.
Accessibility
The toolbar has role="toolbar", aria-orientation, and an aria-label from label. It is a
single tab stop: one item has tabindex="0" and the rest tabindex="-1", and the toolbar
remembers the last focused item.
| Key | Action |
|---|---|
| Right Arrow (horizontal), Down Arrow (vertical) | Focuses the next item, wrapping. |
| Left Arrow (horizontal), Up Arrow (vertical) | Focuses the previous item, wrapping. |
| Home, End | Focuses the first or last item. |
| Tab | Leaves the toolbar. |
Left and Right swap in right-to-left text. See the WAI-ARIA Toolbar pattern.
Theming
The default demo mode shows the component without a package theme. Use the shared preview controls on this page to compare inherited, light, and dark color schemes or to apply the optional Material theme only inside the demo frames.
API
Properties
| Property | Markup | Type | Default | Description |
|---|---|---|---|---|
label | label | string | 'Toolbar' | Accessible label for this toolbar. Default label is 'Toolbar'. |
orientation | orientation | 'horizontal' | 'vertical' | 'horizontal' | Toolbar layout along the inline (`horizontal`) or block (`vertical`) axis. |
Slots
| Name | Description |
|---|---|
(default) | Takes any number of child controls, `rc-button`, or `rc-chip` elements to display in the toolbar. Direct native controls and the native buttons inside supported wrappers are navigable. |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--rc-toolbar-gap-inline | 0.25em | Gap between toolbar items |
--rc-toolbar-padding-inline | calc(var(--rc-control-padding-inline) / 2) | Horizontal padding on the toolbar container |
--rc-toolbar-padding-block | calc(var(--rc-control-padding-block) / 2) | Vertical padding on the toolbar container |
--rc-toolbar-flex-wrap | nowrap | Whether toolbar items wrap onto multiple lines |
--rc-toolbar-radius | var(--rc-control-radius) | Toolbar container border radius |
--rc-toolbar-vertical-radius | var(--rc-toolbar-radius) | Toolbar container border radius when orientation is vertical; falls back to `--rc-toolbar-radius` |
CSS Parts
| Part | Description |
|---|---|
root | The toolbar container element |