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.

<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

{{ label }}