### 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
asService Public baseItemSelected baseStatesDirective Public isDropdownView items
###### Methods
Public itemSelected
###### Outputs
itemClick
###### HostBindings
class
###### Accessors
cssClasses

### 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
get `cssClasses()`

# results matching ""

# No results matching ""