eui documentation
  1. Components
  2. EuiNavbarItemComponent

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
Inputs
HostBindings
HostListeners
Accessors

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
getcssClasses()

results matching ""

    No results matching ""