# EuiNavbarItemComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-navbar&gt;
  &lt;eui-navbar-item id=&quot;dashboard&quot; label=&quot;Dashboard&quot; [isActive]=&quot;true&quot;&gt;&lt;/eui-navbar-item&gt;
  &lt;eui-navbar-item id=&quot;reports&quot; label=&quot;Reports&quot;&gt;&lt;/eui-navbar-item&gt;
&lt;/eui-navbar&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Focusable with <code>tabindex=&quot;0&quot;</code></li>
<li>Activatable with Enter or Space keys</li>
<li>Active state is visually indicated</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of <code>eui-navbar</code></li>
<li>Requires unique <code>id</code> for selection tracking</li>
<li>Label is required for display</li>
</ul>


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

**Standalone:** false

## Inputs

- **id**: `string` - <p>Unique identifier for the navbar item.
Used to track selection state and emitted in the parent navbar&#39;s itemClick event.
Required for proper item selection management.</p>

- **isActive**: `boolean` - <p>Determines whether this navbar item is currently selected.
When true, applies the &#39;eui-navbar-item--active&#39; CSS class for visual distinction.
Defaults to false. Managed by the parent EuiNavbarComponent during selection.</p>

- **label**: `string` - <p>Text label displayed for the navbar item.
Rendered directly in the component template.
Required for meaningful user interaction.</p>

