ShellBar

v0.8.0
@ui5/webcomponents-fiori
<ui5-shellbar>

ShellBar

Application 1 Application 2 Application 3 Application 4 Application 5
An Kimura
App Finder Settings Edit Home Page Help Sign out
<ui5-shellbar
	id="shellbar"
	primary-title="Corporate Portal"
	secondary-title="secondary title"
	notification-count="99+"
	show-notifications
	show-product-switch
	show-co-pilot
>

	<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
	<img slot="logo" src="../../../assets/images/sap-logo-svg.svg"/>
	<ui5-button icon="nav-back" slot="startButton"></ui5-button>

	<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
	<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls" count="4"></ui5-shellbar-item>

	<ui5-input slot="searchField"></ui5-input>

	<ui5-li slot="menuItems">Application 1</ui5-li>
	<ui5-li slot="menuItems">Application 2</ui5-li>
	<ui5-li slot="menuItems">Application 3</ui5-li>
	<ui5-li slot="menuItems">Application 4</ui5-li>
	<ui5-li slot="menuItems">Application 5</ui5-li>

</ui5-shellbar>

<ui5-popover id="popover" placement-type="Bottom">
	<div class="popover-header">
		<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
	</div>

	<div class="popover-content">
		<ui5-list separators="None" >
			<ui5-li icon="sys-find">App Finder</ui5-li>
			<ui5-li icon="settings">Settings</ui5-li>
			<ui5-li icon="edit">Edit Home Page</ui5-li>
			<ui5-li icon="sys-help">Help</ui5-li>
			<ui5-li icon="log">Sign out</ui5-li>
		</ui5-list>
	</div>
</ui5-popover>

<script>
	shellbar.addEventListener("profile-click", function(event) {
		popover.openBy(event.detail.targetRef);
	});
</script>
	

Basic ShellBar

<ui5-shellbar
	primary-title="Corporate Portal"
	secondary-title="secondary title"
>
	<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
	<img slot="logo" src="../../../assets/images/sap-logo-svg.svg"/>
	<ui5-button icon="nav-back" slot="startButton"></ui5-button>
</ui5-shellbar>
	

ShellBar with search and notifications

<ui5-shellbar
	primary-title="Corporate Portal"
	secondary-title="secondary title"
	show-notifications
	notification-count="22"
>
		<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
		<img slot="logo" src="../../../assets/images/sap-logo-svg.svg"/>
		<ui5-input slot="searchField" placeholer="Enter service..."></ui5-input>
</ui5-shellbar>
	

ShellBar with product switch and CoPilot

<ui5-shellbar
primary-title="Corporate Portal"
secondary-title="secondary title"
show-co-pilot
show-product-switch
show-notifications
notification-count="22"
>
	<img slot="logo" src="../../../assets/images/sap-logo-svg.svg"/>
	<ui5-avatar slot="profile" image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
</ui5-shellbar>
	

Overview

The ui5-shellbar is meant to serve as an application header and includes numerous built-in features, such as: logo, profile image/icon, title, search field, notifications and so on.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/ShellBar";

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
notificationCount
notification-count
string
""
Defines the notificationCount, displayed in the notification icon top-right corner.
primaryTitle
primary-title
string
""
Defines the primaryTitle.

Note: The primaryTitle would be hidden on S screen size (less than approx. 700px).
secondaryTitle
secondary-title
string
""
Defines the secondaryTitle.

Note: The secondaryTitle would be hidden on S and M screen sizes (less than approx. 1300px).
showCoPilot
show-co-pilot
boolean
false
Defines, if the product CoPilot icon would be displayed.
Note: By default the co-pilot is displayed as static SVG. If you need an animated co-pilot, you can import the "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js" module as add-on feature.
showNotifications
show-notifications
boolean
false
Defines, if the notification icon would be displayed.
showProductSwitch
show-product-switch
boolean
false
Defines, if the product switch icon would be displayed.

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 ui5-shellbar aditional items.

Note: You can use the  <ui5-shellbar-item></ui5-shellbar-item>.
logo
HTMLElement
Defines the logo of the ui5-shellbar. For example, you can use ui5-avatar or img elements as logo.
menuItems
HTMLElement [0..n]
Defines the items displayed in menu after a click on the primary title.

Note: You can use the  <ui5-li></ui5-li> and its ancestors.
profile
HTMLElement
You can pass ui5-avatar to set the profile image/icon. If no profile slot is set - profile will be excluded from actions.
searchField
HTMLElement [0..n]
Defines the ui5-input, that will be used as a search field.
startButton
HTMLElement [0..n]
Defines a ui5-button in the bar that will be placed in the beginning. We encourage this slot to be used for a back or home button. It gets overstyled to match ShellBar's styling.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
co-pilot-click
Fired, when the co pilot is activated.
since v0.10
targetRef
type: HTMLElement
description: dom ref of the activated element
logo-click
Fired, when the logo is activated.
since v0.10
targetRef
type: HTMLElement
description: dom ref of the activated element
menu-item-click
Fired, when a menu item is activated Note: You can prevent closing of oveflow popover by calling event.preventDefault().
since v0.10
item
type: HTMLElement
description: dom ref of the activated list item
notifications-click
Fired, when the notification icon is activated.
targetRef
type: HTMLElement
description: dom ref of the activated element
product-switch-click
Fired, when the product switch icon is activated. Note: You can prevent closing of oveflow popover by calling event.preventDefault().
targetRef
type: HTMLElement
description: dom ref of the activated element
profile-click
Fired, when the profile slot is present.
targetRef
type: HTMLElement
description: dom ref of the activated element

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
closeOverflow
Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event

ShellBarItem

The ui5-shellbar-item represents a custom item, that might be added to the ui5-shellbar.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/ShellBarItem";

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
count
string
""
Defines the count displayed in the top-right corner.
since v1.0.0-rc.6
icon
string
""
Defines the name of the item's icon.
stableDomRef
stable-dom-ref
undefined
Defines the stable selector that you can use via getStableDomRef method.
since v1.0.0-rc.8
text
string
""
Defines the item text.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
item-click
Fired, when the item is pressed.
targetRef
type: HTMLElement
description: dom ref of the clicked element
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