### File

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

### Description

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.

Example :

    <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

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `eui-toolbar-navbar-item`

template

    {{ label }}

### Index

###### Properties

- navBarComponentParent
- tabindex

###### Inputs

- id
- isActive
- label

###### HostBindings

- attr.tabindex
- class

###### HostListeners

- click
- keydown

###### Accessors

- cssClasses

### Constructor

`constructor()`

### Inputs

id
Type : `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
Type : `boolean`
Default value : `false`
Indicates whether this navbar item is currently active/selected. When true, applies active styling to highlight the current selection.

label
Type : `string`
Text label displayed for the navbar item. Provides the visible text content for the navigation tab. Required for item display.

### HostBindings

attr.tabindex
Type : `number`
Default value : `0`

class
Type : `string`

### HostListeners

click
`click()`

keydown
Arguments : `'$event'`
`keydown(event: KeyboardEvent)`

### Properties

navBarComponentParent
Type : `EuiToolbarNavbarComponent`

tabindex
Type : `number`
Default value : `0`
Decorators : `@HostBinding('attr.tabindex')`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""