File

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

Description

Application-level toolbar component that provides a horizontal navigation and action bar at the top of the application. Automatically registers itself with EuiAppShellService to coordinate layout calculations and CSS variable management. Supports primary and secondary visual variants for different toolbar contexts within the application hierarchy. Includes built-in sidebar toggle and language selector integration points.

<!-- Basic toolbar within app structure -->
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
      <eui-toolbar-items euiPositionRight>
        <eui-toolbar-item-notifications>
          <eui-notifications [count]="notificationItems.length" [items]="notificationItems"></eui-notifications>
        </eui-toolbar-item-notifications>
      </eui-toolbar-items>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

<!-- Secondary toolbar variant -->
<eui-app>
  <eui-app-toolbar [euiSecondary]="true">
    <eui-toolbar>
      <!-- Toolbar content -->
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

Accessibility

• Uses role="banner" for semantic landmark identification
• Provides consistent navigation structure across application
• Sidebar toggle is keyboard accessible
• Language selector supports keyboard navigation
• Child toolbar components inherit accessibility features

Notes

• Must be used within eui-app component for proper layout integration
• Automatically registers with EuiAppShellService on init
• Sets --eui-app-toolbar-height CSS variable for layout calculations
• euiSecondary applies secondary theme styling (default: false, primary)
• Expects eui-toolbar child component for content projection
• Includes built-in sidebar toggle and language selector slots
• Cleans up layout state and CSS variables on destroy
• Theme variants affect nested eui-toolbar styling automatically

Implements

OnInit OnDestroy