MISCBETA

Toolbar

An accessible action surface with logical sections, responsive wrapping, semantic separators and RTL-aware roving keyboard focus.

Native controlsRoving focusDynamic content safe

GET STARTED

Import

Import only the standalone Toolbar pieces used by the view.

import {
  NeuralToolbar,
  NeuralToolbarStart,
  NeuralToolbarCenter,
  NeuralToolbarEnd,
  NeuralToolbarSeparator,
} from '@neural-ng/core/toolbar';

@Component({
  imports: [
    NeuralToolbar,
    NeuralToolbarStart,
    NeuralToolbarCenter,
    NeuralToolbarEnd,
    NeuralToolbarSeparator,
  ],
})
export class DocumentActions {}

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.

Ready · Focus: none

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.

Bounded focus

Native tab order

Unstyled and typed class slots

Semantics, sections, separators and keyboard behavior remain while the consumer owns the Toolbar surface.

TOOLBAR

API

Five standalone composition primitives and one typed focus event.

Components

NeuralToolbarneural-toolbar

Owns semantics and focus movement.

NeuralToolbarStartneural-toolbar-start

Logical starting actions.

NeuralToolbarCenterneural-toolbar-center

Flexible centered content.

NeuralToolbarEndneural-toolbar-end

Logical ending actions.

NeuralToolbarSeparatorneural-toolbar-separator

Orientation-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

focusChangedNeuralToolbarFocusChange

Emits the focused item index, HTMLElement and originating keyboard or focus event.

Typed class slots

root

Toolbar role and visual surface.

start

Logical starting section.

center

Flexible centered section.

end

Logical ending section.

separator

Semantic separator line.

Public types and compatibility

NeuralToolbarOrientation · NeuralToolbarClasses · NeuralToolbarFocusChange

Former Toolbar*Component exports remain deprecated aliases. New code uses the canonical NeuralToolbar* names.

Primary

Surface

Import

Document actions

Responsive wrapping

Vertical orientation

Focus policies

Unstyled and typed class slots

Role and accessible name

Keyboard model

Disabled controls

Editable controls

RTL and lifecycle