@angular/aria/toolbar

Toolbar

directive

A toolbar widget container for a group of interactive widgets, such as buttons or radio groups. It provides a single point of reference for keyboard navigation and focus management. It supports various orientations and disabled states.

API

    
      class Toolbar implements OnDestroy {}

element

HTMLElement

A reference to the host element.

textDirection

WritableSignal<Direction>

Text direction.

orientation

InputSignal<"vertical" | "horizontal">

Whether the toolbar is vertically or horizontally oriented.

softDisabled

InputSignalWithTransform<boolean, unknown>

Whether to allow disabled items to receive focus. When true, disabled items are focusable but not interactive. When false, disabled items are skipped during navigation.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the toolbar is disabled.

wrap

InputSignalWithTransform<boolean, unknown>

Whether focus should wrap when navigating.

ngOnDestroy

void

@returnsvoid

Description

<div ngToolbar orientation="horizontal" [wrap]="true">
  <button ngToolbarWidget>Save</button>
  <button ngToolbarWidget>Print</button>

  <div ngToolbarWidgetGroup>
    <button ngToolbarWidget>Left</button>
    <button ngToolbarWidget>Center</button>
    <button ngToolbarWidget>Right</button>
  </div>
</div>