eui documentation
  1. Components
  2. EuiToolbarItemsComponent

File

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

Description

Container component for grouping toolbar items with flexible positioning options. Provides a wrapper for organizing multiple toolbar items (buttons, icons, menus) with left or right alignment. Content is projected via ng-content allowing flexible composition of toolbar actions and utilities. Supports right-side positioning through euiEnd or euiPositionRight properties for consistent layout control. Typically used within eui-toolbar to organize action buttons, user profile, notifications, and other toolbar elements.

Example :
<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 [items]="notificationItems"></eui-notifications>
        </eui-toolbar-item-notifications>
        <eui-toolbar-item>
          <button euiButton>Action</button>
        </eui-toolbar-item>
      </eui-toolbar-items>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>

Accessibility

  • Groups related toolbar actions logically
  • Content should be keyboard accessible
  • Interactive elements must have proper focus states
  • Maintains consistent toolbar navigation

Notes

  • Must be used within eui-toolbar for proper layout
  • Groups multiple eui-toolbar-item components
  • Content projected via ng-content
  • euiPositionRight or euiEnd for right alignment (default: left)
  • Both positioning properties are functionally equivalent
  • Common content: notifications, buttons, user profile
  • Typically used for right-aligned actions
  • Works with eui-toolbar-item children
  • Flexbox-based positioning
  • Multiple instances can exist in same toolbar

Metadata

selector eui-toolbar-items
template 
<ng-content />

Index

Inputs
HostBindings
Accessors

Inputs

euiEnd
Type : boolean
Default value : false

Positions the toolbar items container to the right end of the toolbar. When true, applies right alignment styling using flexbox positioning.
euiPositionRight
Type : boolean
Default value : false

Alternative property to position the toolbar items container to the right. When true, applies right alignment styling. Functionally equivalent to euiEnd.

HostBindings

class
Type : string

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""