### File

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

### Description

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

Example :

    <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

### Metadata

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

template

    {{ label }}

styleUrl | `./eui-navbar-item.scss`

### 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 to track selection state and emitted in the parent navbar's itemClick event. Required for proper item selection management.

isActive
Type : `boolean`
Default value : `false`
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
Type : `string`
Text label displayed for the navbar item. Rendered directly in the component template. Required for meaningful user interaction.

### HostBindings

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

class
Type : `string`

### HostListeners

click
`click()`

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

### Properties

navBarComponentParent
Type : `EuiNavbarComponent`

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

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""