MenuBar - Angular - W3cubDocs

A menu bar of menu items.

API

class MenuBar<V> {
  readonly element: HTMLElement;
  readonly @Input() disabled: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() softDisabled: InputSignalWithTransform<boolean, unknown>;
  readonly textDirection: WritableSignal<Direction>;
  readonly @Input() @Output('valuesChange') values: ModelSignal<V[]>;
  readonly @Input() wrap: InputSignalWithTransform<boolean, unknown>;
  readonly @Input() typeaheadDelay: InputSignal<number>;
  readonly @Output() itemSelected: OutputEmitterRef<V>;
  close(): void;
}

element

HTMLElement

A reference to the host element.

disabled

InputSignalWithTransform<boolean, unknown>

Whether the menubar is disabled.

softDisabled

InputSignalWithTransform<boolean, unknown>

Whether the menubar is soft disabled.

textDirection

WritableSignal<Direction>

The directionality (LTR / RTL) context for the application (or a subtree of it).

values

ModelSignal<V[]>

The values of the currently selected menu items.

wrap

InputSignalWithTransform<boolean, unknown>

Whether the menu should wrap its items.

typeaheadDelay

InputSignal<number>

The delay in milliseconds before the typeahead buffer is cleared.

itemSelected

OutputEmitterRef<V>

A callback function triggered when a menu item is selected.

close

void

Closes the menubar.

@returnsvoid

Description

A menu bar of menu items.

Like the ngMenu, a ngMenuBar is used to offer a list of menu item choices to users. However, a menubar is used to display a persistent, top-level, always-visible set of menu item choices, typically found at the top of an application window.

<div ngMenuBar>
  <button ngMenuTrigger [menu]="fileMenu">File</button>
  <button ngMenuTrigger [menu]="editMenu">Edit</button>
</div>

<div ngMenu #fileMenu="ngMenu">
  <div ngMenuItem>New</div>
  <div ngMenuItem>Open</div>
</div>

<div ngMenu #editMenu="ngMenu">
  <div ngMenuItem>Cut</div>
  <div ngMenuItem>Copy</div>
</div>