Bar
v1.0.0-rc.11
@ui5/webcomponents-fiori
<ui5-bar>

Header Bar

Header Title
<ui5-bar design="Header">
	<ui5-button icon="home" title="Go home" design="Transparent" slot="startContent"></ui5-button>
	<ui5-label id="basic-label" slot="middleContent">Header Title</ui5-label>
	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
</ui5-bar>
	

Subheader Bar

Subheader Title
<ui5-bar design="Subheader">
	<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
	<ui5-label id="basic-label" slot="middleContent">Subheader Title</ui5-label>
	<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
</ui5-bar>
	

Footer Bar

Agree Decline Cancel
<ui5-bar design="Footer">
	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
</ui5-bar>
	

FloatingFooter Bar

Agree Decline Cancel
<ui5-bar design="FloatingFooter">
	<ui5-button design="Positive" slot="endContent">Agree</ui5-button>
	<ui5-button design="Negative" slot="endContent">Decline</ui5-button>
	<ui5-button design="Transparent" slot="endContent">Cancel</ui5-button>
</ui5-bar>
	

Overview

The Bar component consists of three areas to hold its content. 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 causes unpredictable behavior. For the ui5-bar

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
design
BarDesign
"Header"
Defines the ui5-bar design.

Note: Available options are "Header", "Subheader", "Footer", "FloatingFooter".

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
endContent
HTMLElement [0..n]
Defines the content at the end of the bar
middleContent
HTMLElement [0..n]
Defines the content in the middle of the bar
startContent
HTMLElement [0..n]
Defines the content at the start of the bar
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel