# EuiToolbarNavbarItemComponent

**Type:** component



Navigation bar item component representing a single clickable tab or link within the toolbar navbar.
Provides visual active state indication and keyboard navigation support (Enter/Space keys).
Automatically registers with parent EuiToolbarNavbarComponent to coordinate selection state.
Emits selection events to parent when clicked or activated via keyboard.
Typically used within eui-toolbar-navbar for horizontal tab navigation.

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

### Accessibility
- Keyboard accessible (Enter/Space keys)
- Tabindex 0 for keyboard navigation
- Active state visually indicated
- Focus visible for keyboard users
- Click and keyboard events handled
- ARIA attributes for tab role

### Notes
- Must be used within eui-toolbar-navbar for proper functionality
- Automatically registers with parent navbar component
- id required for selection tracking
- label required for display text
- isActive controls active/selected state (default: false)
- Only one item should be active at a time (managed by parent)
- Click handler notifies parent via itemSelected()
- Enter and Space keys trigger selection
- Active state applies 'eui-toolbar-navbar-item--active' class
- Parent navbar coordinates selection across all items
- Tabindex 0 makes item keyboard focusable
- Template displays label text only


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

## Inputs
- **id**: `string` - Unique identifier for the navbar item. Used by parent navbar component to track and manage selection state. Required for proper item identification and selection handling.
- **isActive**: `boolean` - Indicates whether this navbar item is currently active/selected. When true, applies active styling to highlight the current selection.
- **label**: `string` - Text label displayed for the navbar item. Provides the visible text content for the navigation tab. Required for item display.