eui documentation
  1. Components
  2. EuiNavbarComponent

File

packages/components/eui-navbar/eui-navbar.component.ts

Description

A horizontal navigation bar component that displays a collection of selectable items. Automatically adapts to a dropdown view when the available width is insufficient to display all items inline. Supports primary and secondary visual variants through the BaseStatesDirective. Manages the active state of child navbar items and emits selection events.

Basic Usage

Example :
<eui-navbar (itemClick)="onNavItemClick($event)">
  <eui-navbar-item id="home" label="Home" [isActive]="true"></eui-navbar-item>
  <eui-navbar-item id="about" label="About"></eui-navbar-item>
  <eui-navbar-item id="contact" label="Contact"></eui-navbar-item>
</eui-navbar>
Example :
onNavItemClick(itemId: string) {
  console.log('Selected:', itemId);
}

Accessibility

  • Navbar items are keyboard navigable with Tab key
  • Enter and Space keys activate items
  • Active item is visually distinguished and announced to screen readers

Notes

  • Automatically switches to dropdown when width is constrained
  • Only one item can be active at a time
  • Supports primary and secondary visual variants

Implements

AfterContentInit AfterViewInit

Metadata

changeDetection ChangeDetectionStrategy.Default
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary 
selector eui-navbar
imports AsyncPipe EUI_DROPDOWN EUI_ICON EUI_BUTTON
templateUrl ./eui-navbar.component.html
styleUrl ./eui-navbar.scss

Index

Properties
Methods
Outputs
HostBindings
Accessors

Outputs

itemClick
Type : EventEmitter<string>

Emitted when a navbar item is selected by user interaction. Payload contains the id of the selected navbar item. Triggered by click or keyboard activation (Enter/Space) on any child EuiNavbarItemComponent.

HostBindings

class
Type : string

Methods

Public itemSelected
itemSelected(id: string)
Parameters :
Name Type Optional
id string No
Returns : void

Properties

asService
Type : unknown
Default value : inject(EuiAppShellService)
Public baseItemSelected
Type : EuiNavbarItemComponent
baseStatesDirective
Type : unknown
Default value : inject(BaseStatesDirective)
Public isDropdownView
Type : unknown
Default value : false
items
Type : QueryList<EuiNavbarItemComponent>
Decorators :
@ContentChildren(undefined)

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""