Toolbar
An accessible action surface with logical sections, responsive wrapping, semantic separators and RTL-aware roving keyboard focus.
GET STARTED
Import
Import only the standalone Toolbar pieces used by the view.
LOGICAL COMPOSITION
Document actions
Start, center and end express intent instead of physical left and right positions. The toolbar delegates activation to the projected Neural controls.
Responsive wrapping
Wrap is enabled by default, allowing projected action groups to reflow without changing their semantic or keyboard order.
Vertical orientation
Vertical mode changes layout, separator orientation and navigation to Arrow Up and Arrow Down.
Focus policies
Disable looping for bounded navigation. Disable roving focus when a projected composite widget must retain full ownership of its internal keyboard model.
Unstyled and typed class slots
Semantics, sections, separators and keyboard behavior remain while the consumer owns the Toolbar surface.
TOOLBAR
Accessibility
A named toolbar composite with predictable tab entry and directional navigation.
Role and accessible name
The root exposes role="toolbar" and orientation. Supply a contextual ariaLabel or reference visible text with ariaLabelledby; the reference takes precedence.
Keyboard model
Tab enters one active control. Horizontal toolbars use Left and Right, vertical toolbars use Up and Down, while Home and End reach the logical edges. Projected controls retain Enter and Space activation.
Disabled controls
Native disabled and aria-disabled="true" controls are skipped. A MutationObserver resynchronizes focus when projected controls are added, removed or disabled.
Editable controls
Arrow handling is not intercepted while focus is inside an input, select, textarea or contenteditable element, preserving caret movement and native editing behavior.
RTL and lifecycle
Horizontal arrow direction mirrors computed RTL direction. On destroy, observed nodes are disconnected and every consumer-provided tabindex is restored. Browser-only work is deferred, keeping SSR and hydration safe.
TOOLBAR
API
Five standalone composition primitives and one typed focus event.
Components
NeuralToolbarneural-toolbarOwns semantics and focus movement.
NeuralToolbarStartneural-toolbar-startLogical starting actions.
NeuralToolbarCenterneural-toolbar-centerFlexible centered content.
NeuralToolbarEndneural-toolbar-endLogical ending actions.
NeuralToolbarSeparatorneural-toolbar-separatorOrientation-aware semantic separator.
Toolbar inputs
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | NeuralToolbarOrientation | 'horizontal' | Controls layout, separator direction and arrow keys. |
| wrap | boolean | true | Allows horizontal content to wrap. |
| loop | boolean | true | Wraps roving focus between logical edges. |
| rovingFocus | boolean | true | Maintains one tab stop and handles directional navigation. |
| ariaLabel | string | null | 'Toolbar' | Accessible name when ariaLabelledby is absent. |
| ariaLabelledby | string | null | null | References visible naming content and takes precedence. |
| toolbarClass | string | '' | Adds classes to the internal role=toolbar element. |
| classes | NeuralToolbarClasses | {} | Typed classes for every slot. |
| unstyled | boolean | false | Removes NeuralNg visual classes. |
Section inputs
sectionClassstring''Additional class for start, center or end section roots.
separatorClassstring''Additional class for the separator element.
Events
focusChangedNeuralToolbarFocusChangeEmits the focused item index, HTMLElement and originating keyboard or focus event.
Typed class slots
rootToolbar role and visual surface.
startLogical starting section.
centerFlexible centered section.
endLogical ending section.
separatorSemantic separator line.
Public types and compatibility
NeuralToolbarOrientation · NeuralToolbarClasses · NeuralToolbarFocusChange
Former Toolbar*Component exports remain deprecated aliases. New code uses the canonical NeuralToolbar* names.
TOOLBAR
Design tokens
Surface, spacing and semantic separator treatment are independently tokenized.
Design tokens
Override tokens locally, at a product boundary or through a generated Neural theme.
--neural-toolbar-gapSpacing between component items.
--neural-toolbar-paddingComponent internal spacing.
--neural-toolbar-colorComponent foreground color.
--neural-toolbar-backgroundComponent background surface.
--neural-toolbar-borderComponent border shorthand.
--neural-toolbar-radiusComponent corner radius.
--neural-toolbar-shadowComponent box shadow.
--neural-toolbar-backdrop-filterComponent backdrop filter effect.
--neural-toolbar-section-gapSpacing between section items.
--neural-toolbar-separator-colorSeparator foreground color.
--neural-toolbar-separator-lengthBlock-axis length of a separator in a horizontal toolbar.