### File

`packages/components/layout/eui-toolbar/toolbar-navbar/toolbar-navbar.component.ts`

### Description

Navigation bar container component for horizontal tab navigation within the toolbar. Manages a collection of navbar items with automatic active state coordination and responsive dropdown fallback. Automatically switches to dropdown mode when navbar items exceed available horizontal space. Integrates with EuiAppShellService for responsive behavior and coordinates selection state across child items. Emits events when navbar items are clicked for parent components to handle navigation logic.

Example :

    <eui-app>
      <eui-app-toolbar>
        <eui-toolbar>
          <eui-toolbar-navbar (itemClick)="onNavItemClick($event)">
            <eui-toolbar-navbar-item id="home" [isActive]="true">
              Home
            </eui-toolbar-navbar-item>
            <eui-toolbar-navbar-item id="products">
              Products
            </eui-toolbar-navbar-item>
            <eui-toolbar-navbar-item id="about">
              About
            </eui-toolbar-navbar-item>
          </eui-toolbar-navbar>
        </eui-toolbar>
      </eui-app-toolbar>
    </eui-app>

Example :

    onNavItemClick(itemId: string): void {
      console.log('Selected:', itemId);
    }

### Accessibility

- Tab navigation keyboard accessible
- Active state clearly indicated
- Dropdown fallback for overflow
- Focus management for navigation
- ARIA attributes for tab structure
- Keyboard navigation between items

### Notes

- Must be used within eui-toolbar for proper layout
- Contains eui-toolbar-navbar-item children
- Automatically coordinates active state across items
- Responsive: switches to dropdown when items overflow
- Overflow detection based on parent toolbar width
- itemClick event emits selected item id
- itemSelected() method updates active states
- Only one item can be active at a time
- baseItemSelected tracks initially active item
- isDropdownView flag controls display mode
- Dropdown mode activated automatically on overflow
- Integrates with EuiAppShellService for responsive behavior

### Implements

`AfterContentInit` `AfterViewInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-toolbar-navbar`
imports | `AsyncPipe` `EUI_ICON` `EUI_BUTTON` `EUI_DROPDOWN`
templateUrl | `./toolbar-navbar.component.html`
styleUrl | `./toolbar-navbar.component.scss`

### Index

###### Properties

- asService
- Public baseItemSelected
- class
- Public isDropdownView
- items

###### Methods

- Public itemSelected

###### Outputs

- itemClick

###### HostBindings

- class

### Outputs

itemClick
Type : `EventEmitter<string>`
Emitted when a navbar item is clicked or activated. Payload: string - the id of the selected navbar item Triggered when user clicks or keyboard-activates any navbar item. Automatically updates active state of all items.

### HostBindings

class
Type : `string`
Default value : `'eui-toolbar-navbar'`

### Methods

Public itemSelected
`itemSelected(id: string)`

Handles item selection from child navbar items. Updates active state across all items and emits itemClick event with selected item id. Called internally by child EuiToolbarNavbarItemComponent instances.

Parameters :

Name | Type | Optional
id | `string` | No

Returns : `void`

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

Public baseItemSelected
Type : `EuiToolbarNavbarItemComponent`

class
Type : `string`
Default value : `'eui-toolbar-navbar'`
Decorators : `@HostBinding()`

Public isDropdownView
Type : `unknown`
Default value : `false`

items
Type : `QueryList<EuiToolbarNavbarItemComponent>`
Decorators : `@ContentChildren(undefined)`

# results matching ""

# No results matching ""