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>; @Output() onSelect: OutputEmitterRef<V>; close(): void;} element
HTMLElementA 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.
onSelect
OutputEmitterRef<V>A callback function triggered when a menu item is selected.
close
voidCloses the menubar.
@returns
voidDescription
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>Jump to details