ShellBar

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

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-fiori/dist/ShellBar.js";

Basic Sample

The ShellBar includes Back button, Logo, Title and Profile image.

Properties

primaryTitle

Description	Defines the primaryTitle. Note: The primaryTitle would be hidden on S screen size (less than approx. 700px).
Type	string
Default	""

secondaryTitle

Description	Defines the secondaryTitle. Note: The secondaryTitle would be hidden on S and M screen sizes (less than approx. 1300px).
Type	string
Default	""

notificationsCount

Description	Defines the notificationsCount, displayed in the notification icon top-right corner.
Type	string
Default	""

showNotifications

Description	Defines, if the notification icon would be displayed.
Type	boolean
Default	false

showProductSwitch

Description	Defines, if the product switch icon would be displayed.
Type	boolean
Default	false

showCoPilot

Description	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.
Type	boolean
Default	false

showSearchField

Description	Defines, if the Search Field would be displayed when there is a valid searchField slot. Note: By default the Search Field is not displayed.
Type	boolean
Default	false

accessibilityRoles

Description	An object of strings that defines additional accessibility roles for further customization. It supports the following fields: - logoRole: the accessibility role for the logo
Type	ShellBarAccessibilityRoles
Default
Since	1.6.0

accessibilityTexts

Description	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
Type	ShellBarAccessibilityTexts
Default
Since	1.1.0

accessibilityAttributes

Description	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
Type	ShellBarAccessibilityAttributes
Default
Since	1.10.0

logoDomRef

Description	Returns the logo DOM ref.
Type	HTMLElement | null
Default	null
Readonly	true
Since	1.0.0-rc.16

copilotDomRef

Description	Returns the copilot DOM ref.
Type	HTMLElement | null
Default	null
Readonly	true
Since	1.0.0-rc.16

notificationsDomRef

Description	Returns the notifications icon DOM ref.
Type	HTMLElement | null
Default	null
Readonly	true
Since	1.0.0-rc.16

overflowDomRef

Description	Returns the overflow icon DOM ref.
Type	HTMLElement | null
Default	null
Readonly	true
Since	1.0.0-rc.16

profileDomRef

Description	Returns the profile icon DOM ref.
Type	HTMLElement | null
Default	null
Readonly	true
Since	1.0.0-rc.16

productSwitchDomRef

Description	Returns the product-switch icon DOM ref.
Type	HTMLElement | null
Default	null
Readonly	true
Since	1.0.0-rc.16

Slots

default

Description	Defines the ui5-shellbar aditional items. Note: You can use the <ui5-shellbar-item></ui5-shellbar-item>.
Type	Array<ShellBarItem>

profile

Description	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.
Type	Array<HTMLElement>
Since	1.0.0-rc.6

logo

Description	Defines the logo of the ui5-shellbar. For example, you can use ui5-avatar or img elements as logo.
Type	Array<HTMLElement>
Since	1.0.0-rc.8

menuItems

Description	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.
Type	Array<ListItemBase>
Since	0.10

searchField

Description	Defines the ui5-input, that will be used as a search field.
Type	Array<Input>

startButton

Description	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.
Type	Array<IButton>

Events

notifications-click

Description	Fired, when the notification icon is activated.
Type	CustomEvent<ShellBarNotificationsClickEventDetail>
Parameters	targetRef: HTMLElement dom ref of the activated element

profile-click

Description	Fired, when the profile slot is present.
Type	CustomEvent<ShellBarProfileClickEventDetail>
Parameters	targetRef: HTMLElement dom ref of the activated element

product-switch-click

Description	Fired, when the product switch icon is activated. Note: You can prevent closing of overflow popover by calling event.preventDefault().
Type	CustomEvent<ShellBarProductSwitchClickEventDetail>
Parameters	targetRef: HTMLElement dom ref of the activated element

logo-click

Description	Fired, when the logo is activated.
Type	CustomEvent<ShellBarLogoClickEventDetail>
Parameters	targetRef: HTMLElement dom ref of the activated element
Since	0.10

co-pilot-click

Description	Fired, when the co pilot is activated.
Type	CustomEvent<ShellBarCoPilotClickEventDetail>
Parameters	targetRef: HTMLElement dom ref of the activated element
Since	0.10

menu-item-click

Description	Fired, when a menu item is activated Note: You can prevent closing of overflow popover by calling event.preventDefault().
Type	CustomEvent<ShellBarMenuItemClickEventDetail>
Parameters	item: HTMLElement DOM ref of the activated list item
Since	0.10

search-button-click

Description	Fired, when the search button is activated. Note: You can prevent expanding/collapsing of the search field by calling event.preventDefault().
Type	CustomEvent<ShellBarSearchButtonEventDetail>

Methods

closeOverflow

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

CSS Parts

Name	Description
root	Used to style the outermost wrapper of the ui5-shellbar

More Samples

Profile Area

Press the profile image on the right-most side to open a simple popup that one can implment its own profile area.