Toolbar

Introduction

The Toolbar control is used to display a group of items in a single horizontal row. In many cases, a toolbar item is a button without text but with an icon only. For embedding the toolbar item, interface sap.ui.commons.ToolbarItem is used. Toolbar items must have a fixed height compatible with the Toolbar being a single horizontal row. The items can refer to the toolbar's marker class sapUiTb to adjust their own theming when used inside a Toolbar. The items can be separated using the sap.ui.commons.ToolbarSeparator. See ToolbarSeparator

A Toolbar can have a fixed width and be a stand alone Toolbar with a border, or it can be an embedded Toolbar without a border. Additionally, the Toolbar can have a sap.ui.commons.ToolbarDesign which determines the overall visual design including the visual appearance of its controls. See ToolbarDesign

Examples

Standalone Toolbar

The standalone Toolbar in this example contains some buttons as Toolbar items and other controls like a ComboBox, these support the sap.ui.commons.ToolbarItem interface. Additionally, the toolbar has the Standard Toolbar design.

Embedded Toolbar

In this example, the Toolbar is embedded and therefore doesn't have a border. It uses the Flat design and has a fixed width size. Because of this fixed width not all items fit into the Toolbar. If this is the case, or if you resize the browser window so that not all items fit into the Toolbar, an overflow button automatically appears which lets you access the remaining items.

Keyboard Support

It is possible to navigate through the Toolbar items via the Arrow right and Arrow left keys forwards and backwards. The same can be achieved via the Arrow up and Arrow down keys. If you reach the end of the items and then select the next item, the display starts from the first item again. The Space and Enter keys can be used to activate or change the status of a selected control inside the Toolbar. To activate the overflow button, press the Down key or the Space key. Escape closes the overflow popup window.

ARIA Support

The Toolbar has the ARIA role set to toolbar. ARIA support for the items inside the Toolbar is depending on the items themselves. The overflow button has the same ARIA support as the button control (the role is set to button). See Button

API Documentation

See API documentation