# EuiNavbarItemComponent

**Type:** component



A selectable navigation item that must be used as a child of EuiNavbarComponent.
Displays a text label and manages its own active state through visual styling.
Supports keyboard navigation with Enter and Space keys.
Automatically communicates selection events to the parent navbar component.

### Basic Usage
```html
<eui-navbar>
  <eui-navbar-item id="dashboard" label="Dashboard" [isActive]="true"></eui-navbar-item>
  <eui-navbar-item id="reports" label="Reports"></eui-navbar-item>
</eui-navbar>
```

### Accessibility
- Focusable with `tabindex="0"`
- Activatable with Enter or Space keys
- Active state is visually indicated

### Notes
- Must be direct child of `eui-navbar`
- Requires unique `id` for selection tracking
- Label is required for display


**Selector:** `eui-navbar-item`

## Inputs
- **id**: `string` - Unique identifier for the navbar item. Used to track selection state and emitted in the parent navbar's itemClick event. Required for proper item selection management.
- **isActive**: `boolean` - Determines whether this navbar item is currently selected. When true, applies the 'eui-navbar-item--active' CSS class for visual distinction. Defaults to false. Managed by the parent EuiNavbarComponent during selection.
- **label**: `string` - Text label displayed for the navbar item. Rendered directly in the component template. Required for meaningful user interaction.