File

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

Description

Center-aligned container component for toolbar content, positioning elements in the middle of the toolbar. Provides a dedicated region for center-aligned content such as application name, search bar, or navigation tabs. Content is projected via ng-content allowing flexible composition of centered toolbar elements. Automatically applies flexbox centering within the toolbar layout for consistent positioning. Typically used within eui-toolbar to organize content in the center region between left and right toolbar items.

<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-mega-menu [items]="menuItems"></eui-toolbar-mega-menu>
      <eui-toolbar-center>
        <eui-toolbar-app appName="MyWorkplace"></eui-toolbar-app>
      </eui-toolbar-center>
      <eui-toolbar-items euiPositionRight>
        <button euiButton>Action</button>
      </eui-toolbar-items>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

Accessibility

• Center positioning provides visual balance
• Content should follow proper semantic structure
• Interactive elements must be keyboard accessible
• Maintains consistent toolbar layout

Notes

• Must be used within eui-toolbar for proper layout
• Positioned in center of toolbar between left and right content
• Content projected via ng-content
• Flexbox centering applied automatically
• Common content: app name, search bar, navigation tabs
• Works alongside toolbar-items and toolbar-mega-menu
• Provides visual balance in toolbar layout
• Responsive behavior inherits from toolbar

<ng-content />