Control Bar

EuiControlBar is a bottom positioned container and content well intended to provide additional view controls and actions.

The control bar provides an easy way to extend the navigation or views of the current page by allowing you to place tabs, buttons, text, or children within it. It can operate similarly to a flyout, but (at full height) it covers most of the current page; making it a fitting solution for verbose text or additional controls. It can also be used without allowing it to expand, which makes it an easy way to display status information or fixed-position buttons.

This example demonstrates the use of tabs and reduces the size of the content with size="m".

Optional children of the EuiControlBar are rendered in the control bar drawer. You can toggle the visibility of the content with the showContent prop. When you want to display tab content, this is where you'll do it.

The EuiControlBar is responsive in the sense that it utilizes flexbox and overflow scrolls. However, it makes no attempts to reorganize the controls you provide. By default the EuiControlBar is hidden on mobile devices, but this can be overridden with the showOnMobile prop. You'll need to take the layout of your controlTypes into consideration when choosing to display on smaller screens.

A simple way of doing this is to pass in EUI responsive utility classes into the className prop on any of the controlTypes. View the snippet tab to see an example.

The EuiControlBar accepts an array of controlTypes that will be arranged in the order in which they are provided. All controls must be provide a unique id to be used as the key.

• button: Extends EuiButton but always forces to size small. Requires label as the children.
• icon: Extends EuiIcon unless provided an onClick or href, then it will render an EuiButtonIcon.
• text: Simple ghost colored text.
• tab: Renders a button visually as a tab. You must provide your own callback to swap the control bar contents with onClick.
• breadcrumbs: Extends EuiBreadcrumbs.
• spacer: Provides a horizontal space between controls. Id is optional.
• divider: Provides a 1px border between controls. Useful when additional visual separation is needed. Id is optional.

Typically, a control bar is fixed positioned against the browser window and therefore rendered within a portal. To change the parent element of the control bar, change the position prop to 'absolute' or 'relative'.

To offest the left and right position of the control bar, for example, to adjust for side navigation, use the leftOffset or rightOffset props.