# EuiToolbarNavbarItemComponent

**Type:** component

<p>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.</p>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-app&gt;
  &lt;eui-app-toolbar&gt;
    &lt;eui-toolbar&gt;
      &lt;eui-toolbar-navbar (itemClick)=&quot;onNavItemClick($event)&quot;&gt;
        &lt;eui-toolbar-navbar-item
          id=&quot;home&quot;
          label=&quot;Home&quot;
          [isActive]=&quot;true&quot;&gt;
        &lt;/eui-toolbar-navbar-item&gt;
        &lt;eui-toolbar-navbar-item
          id=&quot;products&quot;
          label=&quot;Products&quot;&gt;
        &lt;/eui-toolbar-navbar-item&gt;
      &lt;/eui-toolbar-navbar&gt;
    &lt;/eui-toolbar&gt;
  &lt;/eui-app-toolbar&gt;
&lt;/eui-app&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Keyboard accessible (Enter/Space keys)</li>
<li>Tabindex 0 for keyboard navigation</li>
<li>Active state visually indicated</li>
<li>Focus visible for keyboard users</li>
<li>Click and keyboard events handled</li>
<li>ARIA attributes for tab role</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be used within eui-toolbar-navbar for proper functionality</li>
<li>Automatically registers with parent navbar component</li>
<li>id required for selection tracking</li>
<li>label required for display text</li>
<li>isActive controls active/selected state (default: false)</li>
<li>Only one item should be active at a time (managed by parent)</li>
<li>Click handler notifies parent via itemSelected()</li>
<li>Enter and Space keys trigger selection</li>
<li>Active state applies &#39;eui-toolbar-navbar-item--active&#39; class</li>
<li>Parent navbar coordinates selection across all items</li>
<li>Tabindex 0 makes item keyboard focusable</li>
<li>Template displays label text only</li>
</ul>


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

**Standalone:** false

## Inputs

- **id**: `string` - <p>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.</p>

- **isActive**: `boolean` - <p>Indicates whether this navbar item is currently active/selected.
When true, applies active styling to highlight the current selection.</p>

- **label**: `string` - <p>Text label displayed for the navbar item.
Provides the visible text content for the navigation tab.
Required for item display.</p>

