UI5 Web Components
Search

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"
	notifications-count="99+"
	show-notifications
	show-product-switch
	show-co-pilot
>

	<ui5-avatar slot="profile">
		<img src="../../../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.showAt(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
	notifications-count="22"
>
		<ui5-avatar slot="profile">
			<img src="../../../assets/images/avatars/woman_avatar_5.png" />
		</ui5-avatar>
		<img slot="logo" src="../../../assets/images/sap-logo-svg.svg"/>
		<ui5-input slot="searchField" placeholder="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
notifications-count="22"
>
	<img slot="logo" src="../../../assets/images/sap-logo-svg.svg"/>
	<ui5-avatar slot="profile">
		<img src="../../../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.

Stable DOM Refs

You can use the following stable DOM refs for the ui5-shellbar:
  • logo
  • copilot
  • notifications
  • overflow
  • profile
  • product-switch

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-shellbar exposes the following CSS Shadow Parts:
  • root - Used to style the outermost wrapper of the ui5-shellbar

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/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
accessibilityAttributes
object
An object of strings that defines several additional accessibility attribute values for customization depending on the use case. It supports the following fields:
  • expanded: Indicates whether the anchor element, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values:
    • true
    • false
  • hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the anchor element. Accepts the following string values:
    • Dialog
    • Grid
    • ListBox
    • Menu
    • Tree
since v1.10.0
accessibilityRoles
object
An object of strings that defines additional accessibility roles for further customization. It supports the following fields: - logoRole: the accessibility role for the logo
since v1.6.0
accessibilityTexts
object
An object of strings that defines several additional accessibility texts for even further customization. It supports the following fields: - profileButtonTitle: defines the tooltip for the profile button - logoTitle: defines the tooltip for the logo
since v1.1.0
copilotDomRef (readonly)
copilot-dom-ref
HTMLElement
Returns the copilot DOM ref.
since v1.0.0-rc.16
logoDomRef (readonly)
logo-dom-ref
HTMLElement
Returns the logo DOM ref.
since v1.0.0-rc.16
notificationsCount
notifications-count
string
""
Defines the notificationsCount, displayed in the notification icon top-right corner.
notificationsDomRef (readonly)
notifications-dom-ref
HTMLElement
Returns the notifications icon DOM ref.
since v1.0.0-rc.16
overflowDomRef (readonly)
overflow-dom-ref
HTMLElement
Returns the overflow icon DOM ref.
since v1.0.0-rc.16
primaryTitle
primary-title
string
""
Defines the primaryTitle.

Note: The primaryTitle would be hidden on S screen size (less than approx. 700px).
productSwitchDomRef (readonly)
product-switch-dom-ref
HTMLElement
Returns the product-switch icon DOM ref.
since v1.0.0-rc.16
profileDomRef (readonly)
profile-dom-ref
HTMLElement
Returns the profile icon DOM ref.
since v1.0.0-rc.16
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.
showSearchField
show-search-field
boolean
false
Defines, if the Search Field would be displayed when there is a valid searchField slot.
Note: By default the Search Field is not 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. Note: We recommend not using the size attribute of ui5-avatar because it should have specific size by design in the context of ui5-shellbar profile.
searchField
HTMLElement
Defines the ui5-input, that will be used as a search field.
startButton
HTMLElement
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 overflow 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 overflow 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.
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
click
Fired, when the item is pressed.
targetRef
type: HTMLElement
description: DOM ref of the clicked element
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