Bar

<ui5-bar> | Since 1.0.0-rc.11

The Bar is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent slot, default slot and endContent slot. It has the capability to center content, such as a title, while having other components on the left and right side.

Usage

With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.

Note: Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.

Responsive Behavior

The default slot will be centered in the available space between the startContent and the endContent areas, therefore it might not always be centered in the entire bar.

Keyboard Handling

Fast Navigation

This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up]. In order to use this functionality, you need to import the following module: import "@ui5/webcomponents-base/dist/features/F6Navigation.js"

ES6 Module Import

import "@ui5/webcomponents/dist/Bar.js";

Basic Sample

Properties

accessibleName

Description	Defines the accessible ARIA name of the component.
Type	string | undefined
Default	undefined
Since	2.16.0

accessibleNameRef

Description	Receives id(or many ids) of the elements that label the bar.
Type	string | undefined
Default	undefined
Since	2.16.0

accessibleRole

Description	Specifies the ARIA role applied to the component for accessibility purposes. Note: - By default, accessibleRole is set to "Toolbar", which renders the ARIA role "toolbar". - Use the default accessibleRole value "Toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar. - If there is only one or no active element, set accessibleRole to "None" to avoid rendering the ARIA role "toolbar", as that role implies a grouping of multiple interactive controls.
Type	"None" | "Toolbar" (value descriptions in: BarAccessibleRole)
Default	"Toolbar"
Since	2.10.0

design

Description	Defines the component's design.
Type	"FloatingFooter" | "Footer" | "Header" | "Subheader" (value descriptions in: BarDesign)
Default	"Header"

Slots

default

Description	Defines the content in the middle of the bar.
Type	Array<HTMLElement>

endContent

Description	Defines the content at the end of the bar.
Type	Array<HTMLElement>

startContent

Description	Defines the content at the start of the bar.
Type	Array<HTMLElement>

Events

No events available for this component.

Methods

No methods available for this component.

CSS Parts

For more information on how to use CSS shadow parts, see Usage of CSS Shadow Parts.

Name	Description
bar	Used to style the wrapper of the content of the component
endContent	Used to style the wrapper of the end content of the component
midContent	Used to style the wrapper of the middle content of the component
startContent	Used to style the wrapper of the start content of the component

CSS Custom States

No CSS custom states available for this component.

Bar with accessible role