# EuiToolbarNavbarComponent

**Type:** component



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.

```html
<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>
```
```typescript
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


**Selector:** `eui-toolbar-navbar`

## Outputs
- **itemClick**: `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.