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

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]="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`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-app-toolbar`
imports | `AsyncPipe` `EuiSidebarToggleComponent` `EUI_LANGUAGE_SELECTOR`
templateUrl | `./toolbar.component.html`
styleUrl | `./toolbar.scss`

### Index

###### Properties

- asService
- role

###### Inputs

- euiSecondary

###### HostBindings

- attr.role
- class

###### Accessors

- cssClasses

### Inputs

euiSecondary
Type : `boolean`
Default value : `false`
Applies secondary styling variant to the toolbar.

### HostBindings

attr.role
Type : `string`
Default value : `'banner'`

class
Type : `string`

### Properties

asService
Type : `unknown`
Default value : `inject(EuiAppShellService)`

role
Type : `string`
Default value : `'banner'`
Decorators : `@HostBinding('attr.role')`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""