UI5 Web Components
Search
Bar
v1.0.0-rc.11
@ui5/webcomponents-fiori
<ui5-bar>

Header Bar

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

Subheader Bar

Subheader Title 
<ui5-bar design="Subheader">
	<ui5-button icon="home" tooltip="Go home" slot="startContent"></ui5-button>
	<ui5-label>Subheader Title</ui5-label>
	<ui5-button icon="action-settings" tooltip="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 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.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-bar exposes the following CSS Shadow Parts:
  • bar - Used to style the wrapper of the content of the component

Keyboard Handling

Fast Navigation

This component provides a build in fast navigation group which can be used via F6 / Shift + F6 or Ctrl + Alt(Option) + Down / 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-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 component's 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
default
HTMLElement [0..n]
Defines the content in the middle of the bar
endContent
HTMLElement [0..n]
Defines the content at the end of the bar
startContent
HTMLElement [0..n]
Defines the content at the start of the bar
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel