Updated: July 16, 2024

Bar

Intro

The bar is a container that can hold text, titles, buttons, and input elements.

Bar used as a title bar or page header
Bar used as title bar/page header and as a subheader

When to Use

Do

Use the bar:

  • For page headers, subheaders, footers, and floating footers used on a page, dialog, or popover.
  • If you only need to include a small number of components.
Don't

Don’t use the bar:

  • If you need a container for a larger number of components, with a built-in overflow menu. Use the toolbar instead.

Anatomy

1. Bar container

The bar container provides slots:

A. Start content: Defines the content at the start of the bar.
B. End content: Defines the content at the end of the bar.

Anatomy of a bar container
Anatomy of a bar container

Variants

Title Bar

The bar container is used as a page header.



Title Bar with Subheader

The bar container is used as a page header with a subheader.



Page Footer Bar

The bar container is used as a page footer.



Floating Footer Bar

The bar container is used as a floating footer.



Behavior and Interaction

Within the bar container, all the interactions depend on the components used.

Responsive Behavior

The bar doesn’t have a built-in overflow menu. If there isn’t enough space to show all the elements on the title bar, add a subheader.

Globalization and Localization

The bar container supports left-to-right (LTR) and right-to-left (RTL) reading directions.

Left-to-right (LTR)
Right-to-left (RTL)

Related Links

Components

Implementation

  • Bar (UI5 web component documentation)