eui documentation
  1. Components
  2. EuiToolbarComponent

File

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

Description

Toolbar component providing a horizontal container for navigation, branding, and action items. Supports primary and secondary visual variants with automatic theme inheritance from parent eui-app-toolbar. Integrates with EuiAppShellService for layout coordination and responsive behavior. Provides content projection areas for logo, environment indicator, app name, menu items, and user profile. Detects and adapts to mega menu presence for enhanced navigation capabilities.

Example :
<!-- 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]="5" [items]="notifications"></eui-notifications>
        </eui-toolbar-item-notifications>
      </eui-toolbar-items>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

<!-- Secondary toolbar variant -->
<eui-toolbar [euiSecondary]="true">
  <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
</eui-toolbar>

Accessibility

  • Provides semantic navigation structure for toolbar items
  • Keyboard navigation supported through child components
  • Focus management handled by individual toolbar items
  • Theme variants maintain sufficient contrast ratios
  • Mega menu integration provides accessible dropdown navigation

Notes

  • Must be used within eui-app-toolbar for proper layout integration
  • euiPrimary applies primary brand colors (default: true)
  • euiSecondary applies secondary theme and overrides primary
  • Automatically inherits secondary styling from parent eui-app-toolbar
  • Content projection expects eui-toolbar-mega-menu and eui-toolbar-items children
  • Detects mega menu presence for layout adjustments
  • Integrates with EuiAppShellService for responsive behavior
  • Theme variants are mutually exclusive (secondary overrides primary)

Implements

OnInit AfterViewInit

Metadata

encapsulation ViewEncapsulation.None
selector eui-toolbar
imports AsyncPipe NgTemplateOutlet EuiToolbarLogoComponent EuiToolbarEnvironmentComponent EuiToolbarAppComponent EuiToolbarItemsComponent EuiToolbarItemComponent EUI_USER_PROFILE
templateUrl ./toolbar.component.html
styleUrl ./toolbar.component.scss

Index

Properties
Inputs
HostBindings
Accessors

Inputs

euiPrimary
Default value : true, { transform: booleanAttribute }

Applies primary theme styling to the toolbar. When true, uses primary brand colors. Automatically disabled when euiSecondary is true.
euiSecondary
Default value : false, { transform: booleanAttribute }

Applies secondary theme styling to the toolbar. When true, uses secondary colors and automatically disables primary styling. Automatically inherits secondary styling from parent eui-app-toolbar if present.

HostBindings

class
Type : string

Properties

asService
Type : unknown
Default value : inject(EuiAppShellService)
hasMegaMenu
Type : EuiToolbarMegaMenuComponent
Decorators :
@ContentChild(undefined)

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""