# EuiNavbarComponent

**Type:** component



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

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


**Selector:** `eui-navbar`

## Inputs
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

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