NEURALNG
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.

app.ts TypeScript 
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.