Intro

This guideline now covers both SAPUI5 and SAP Web Components. Learn more.

Information

Icon

false

Intro

The bar is a container used to hold titles, subtitles, buttons, and input elements. It typically appears at the top of a screen or section to provide access to navigation, actions, and key content.

Bar with “Billing Details” text, a back arrow on the left, and a filter icon on the right.

Bar component with back navigation on the left and a filter action icon on the right

Component availability

This component is available in the following libraries:

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.Bar">sap.m.Bar</a></div> <div data-valign="middle"><u>:badge, info, large, _, SAPUI5:</u></div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2Fmain%2FBar%2F">ui5-bar</a></div> <div data-valign="middle"><u>:badge, info, large, _, SAP Web Components:</u></div> </div> <div> <div data-valign="middle">SAP Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fdesign%2FSILcWzK5uFghKun9jx6D7c%2FSAP-Web-UI-Kit%3Fnode-id%3D1101-2321">Bar</a></div> <div data-valign="middle"><u>:badge, info, large, _, Figma:</u></div> </div>

<div> <div data-valign="middle">Library</div> <div data-valign="middle">Technical Name</div> <div data-valign="middle">Identifier</div> </div> <div> <div data-valign="middle">SAPUI5 Demo Kit</div> <div><a href="https%3A%2F%2Fui5.sap.com%2F%23%2Fentity%2Fsap.m.Bar">sap.m.Bar</a></div> <div data-valign="middle"><u>:badge, info, large, _, SAPUI5:</u></div> </div> <div> <div data-valign="middle">SAP Web Components</div> <div data-valign="middle"><a href="https%3A%2F%2Fui5.github.io%2Fwebcomponents%2Fcomponents%2Fmain%2FBar%2F">sap.m.Bar</a></div> <div data-valign="middle"><u>:badge, info, large, _, SAP Web Components:</u></div> </div> <div> <div data-valign="middle">SAP Fiori for Web UI Kit (Figma)</div> <div data-valign="middle"><a href="https%3A%2F%2Fwww.figma.com%2Fcommunity%2Ffile%2F1494295794601744471">Bar</a></div> <div data-valign="middle"><u>:badge, info, large, _, Figma:</u></div> </div>

When to Use

false

Use the bar to:

Display page headers, subheaders, footers, and floating footers used on a page, dialog, or popover.
Include only a small number of components.

dont

false

Don't use the bar to:

Include many components that require an overflow menu. Use the toolbar instead.

Limit the number of actions within the bar.
Use the full width of the screen for the bar.
Place the bar at the top of a container, such as a page, popover, and so on, to provide contextual actions and information.
Place the footer bar at the bottom of the page or container to provide final actions.

Anatomy

The bar defines left and right areas for navigation and actions.

Start content: Left-aligned content area for navigation elements like back buttons, titles, menus, or logos.
End content: Right-aligned content area for actions like buttons, icons, or user profiles.
Bar container: Provides the structural layout.

Bar with three labeled areas: start content on the left (1), end content on the right (2), and the bar container (3).

Bar anatomy

information

Centered content is supported but not recommended. Align content to the start of the bar instead.

Types

Header bar

The bar is used as a header for a container. It can appear without a navigation button (A) or with a navigation button (B), such as Back or Home.

Header bar showing left aligned “Title” text (A) and Back arrow followed by “Title” text (B).

Header bar with title only (A), and with title and “Back” button (B)

Bar with subheader

When the bar is used as a header of a container, it can include an additional subheader for elements such as subtitle, search, or other components. The content of the bar can vary depending on the use case.

A. Standard bar with subheader.
B. Header bar with back navigation arrow, title, action elements, and subheader.
C. Header bar containing a subheader with search bar.

Bar with subheader

The bar stays fixed at the bottom of the container and provides final actions.

Footer bar type

The bar stays above the page content and moves with scrolling, always visible at the bottom of the screen. Padding from the screen edge improves visibility and usability.

Floating footer bar type

States

Busy State

After interaction, the system may take time to respond. In this case, the bar can enter a busy state to indicate that processing is in progress.

information

Use a busy indicator to show loading states within the bar component. Available sizes are small, medium, and large, with medium as the default for bars.

Elements inside the bar have states, but the bar itself is only a container and supports no states except the busy state.

Bar with busy state

Behavior and Interaction

Use the bar for simple scenarios with up to two interactive elements, such as buttons or input fields. The bar component does not support overflow behavior. If you need more than two interactive elements or require responsive overflow handling, use the toolbar component instead.

Responsiveness

The bar component is not fully responsive. When space is limited to display all elements in a header bar, use the bar with subheader variant to distribute the content. For example, use a bar with subheader on mobile, and a header bar on desktop.

Bar with subheader used to display content when space is limited.

For more information, see Content Density.

Accessibility

SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.

For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.

The following keyboard combinations are supported by the SAPUI5 Bar component.

<div> <div>Key Combination</div> <div>What It Does</div> </div> <div> <div><strong>Tab</strong></div> <div>Navigates through the items.</div> </div> <div> <div><strong>Shift + Tab</strong></div> <div>Backward navigation.</div> </div> <div> <div><strong>F6</strong></div> <div>Moves the focus to the next UI group.</div> </div> <div> <div><strong>Shift + F6</strong></div> <div>Backward navigation.</div> </div>

For additional details on screen reader support and Accessible Rich Internet Applications (ARIA), see the UI5 Screen Reader Support and WAI-ARIA Authoring.

Content

Localization

The bar component supports both left-to-right (LTR) and right-to-left (RTL) reading directions. Action buttons (for example, Confirm and Cancel) are end-aligned, appearing on the right in LTR layouts and on the left in RTL layouts.