eui documentation
  1. Components
  2. EuiToolbarNavbarComponent

File

packages/components/layout/eui-toolbar/toolbar-navbar/toolbar-navbar.component.ts

Description

Navigation bar container component for horizontal tab navigation within the toolbar. Manages a collection of navbar items with automatic active state coordination and responsive dropdown fallback. Automatically switches to dropdown mode when navbar items exceed available horizontal space. Integrates with EuiAppShellService for responsive behavior and coordinates selection state across child items. Emits events when navbar items are clicked for parent components to handle navigation logic.

Example :
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-navbar (itemClick)="onNavItemClick($event)">
        <eui-toolbar-navbar-item id="home" [isActive]="true">
          Home
        </eui-toolbar-navbar-item>
        <eui-toolbar-navbar-item id="products">
          Products
        </eui-toolbar-navbar-item>
        <eui-toolbar-navbar-item id="about">
          About
        </eui-toolbar-navbar-item>
      </eui-toolbar-navbar>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>
Example :
onNavItemClick(itemId: string): void {
  console.log('Selected:', itemId);
}

Accessibility

  • Tab navigation keyboard accessible
  • Active state clearly indicated
  • Dropdown fallback for overflow
  • Focus management for navigation
  • ARIA attributes for tab structure
  • Keyboard navigation between items

Notes

  • Must be used within eui-toolbar for proper layout
  • Contains eui-toolbar-navbar-item children
  • Automatically coordinates active state across items
  • Responsive: switches to dropdown when items overflow
  • Overflow detection based on parent toolbar width
  • itemClick event emits selected item id
  • itemSelected() method updates active states
  • Only one item can be active at a time
  • baseItemSelected tracks initially active item
  • isDropdownView flag controls display mode
  • Dropdown mode activated automatically on overflow
  • Integrates with EuiAppShellService for responsive behavior

Implements

AfterContentInit AfterViewInit

Metadata

changeDetection ChangeDetectionStrategy.Default
encapsulation ViewEncapsulation.None
selector eui-toolbar-navbar
imports AsyncPipe EUI_ICON EUI_BUTTON EUI_DROPDOWN
templateUrl ./toolbar-navbar.component.html
styleUrl ./toolbar-navbar.component.scss

Index

Properties
Methods
Outputs
HostBindings

Outputs

itemClick
Type : EventEmitter<string>

Emitted when a navbar item is clicked or activated. Payload: string - the id of the selected navbar item Triggered when user clicks or keyboard-activates any navbar item. Automatically updates active state of all items.

HostBindings

class
Type : string
Default value : 'eui-toolbar-navbar'

Methods

Public itemSelected
itemSelected(id: string)

Handles item selection from child navbar items. Updates active state across all items and emits itemClick event with selected item id. Called internally by child EuiToolbarNavbarItemComponent instances.

Parameters :
Name Type Optional
id string No
Returns : void

Properties

asService
Type : unknown
Default value : inject(EuiAppShellService)
Public baseItemSelected
Type : EuiToolbarNavbarItemComponent
class
Type : string
Default value : 'eui-toolbar-navbar'
Decorators :
@HostBinding()
Public isDropdownView
Type : unknown
Default value : false
items
Type : QueryList<EuiToolbarNavbarItemComponent>
Decorators :
@ContentChildren(undefined)

results matching ""

    No results matching ""