### 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

- asService
- hasMegaMenu

###### Inputs

- euiPrimary
- euiSecondary

###### HostBindings

- class

###### Accessors

- cssClasses

### 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
get `cssClasses()`

# results matching ""

# No results matching ""