Skip to main content

ShellBar

<ui5-shellbar> | Since 0.8.0

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
  • 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​

DescriptionDefines the primaryTitle.
Note: The primaryTitle would be hidden on S screen size (less than approx. 700px).
Typestring | undefined
Defaultundefined

secondaryTitle​

DescriptionDefines the secondaryTitle.
Note: The secondaryTitle would be hidden on S and M screen sizes (less than approx. 1300px).
Typestring | undefined
Defaultundefined

notificationsCount​

DescriptionDefines the notificationsCount, displayed in the notification icon top-right corner.
Typestring | undefined
Defaultundefined

showNotifications​

DescriptionDefines, if the notification icon would be displayed.
Typeboolean
Defaultfalse

showProductSwitch​

DescriptionDefines, if the product switch icon would be displayed.
Typeboolean
Defaultfalse

showSearchField​

DescriptionDefines, if the Search Field would be displayed when there is a valid searchField slot.
Note: By default the Search Field is not displayed.
Typeboolean
Defaultfalse

accessibilityAttributes​

DescriptionDefines additional accessibility attributes on different areas of the component.
The accessibilityAttributes object has the following fields, where each field is an object supporting one or more accessibility attributes:
- logo - logo.role and logo.name.
- notifications - notifications.expanded and notifications.hasPopup.
- profile - profile.expanded, profile.hasPopup and profile.name.
- product - product.expanded and product.hasPopup.
- search - search.hasPopup.
- overflow - overflow.expanded and overflow.hasPopup.
The accessibility attributes support the following values:
- role: Defines the accessible ARIA role of the logo area. Accepts the following string values: button or link.
- expanded: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed. Accepts the following string values: true or false.
- hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
Accepts the following string values: dialog, grid, listbox, menu or tree.
- name: Defines the accessible ARIA name of the area. Accepts any string.
TypeShellBarAccessibilityAttributes
Default
Since1.10.0

logoDomRef​

DescriptionReturns the logo DOM ref.
TypeHTMLElement | null
Defaultnull
Readonlytrue
Since1.0.0-rc.16

notificationsDomRef​

DescriptionReturns the notifications icon DOM ref.
TypeHTMLElement | null
Defaultnull
Readonlytrue
Since1.0.0-rc.16

overflowDomRef​

DescriptionReturns the overflow icon DOM ref.
TypeHTMLElement | null
Defaultnull
Readonlytrue
Since1.0.0-rc.16

profileDomRef​

DescriptionReturns the profile icon DOM ref.
TypeHTMLElement | null
Defaultnull
Readonlytrue
Since1.0.0-rc.16

productSwitchDomRef​

DescriptionReturns the product-switch icon DOM ref.
TypeHTMLElement | null
Defaultnull
Readonlytrue
Since1.0.0-rc.16

Slots​

assistant​

DescriptionDefines the assistant slot.
TypeArray<IButton>
Since2.0.0

default​

DescriptionDefines the ui5-shellbar additional items.
Note: You can use the <ui5-shellbar-item></ui5-shellbar-item>.
TypeArray<ShellBarItem>

profile​

DescriptionYou 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.
TypeArray<HTMLElement>
Since1.0.0-rc.6
DescriptionDefines the logo of the ui5-shellbar. For example, you can use ui5-avatar or img elements as logo.
TypeArray<HTMLElement>
Since1.0.0-rc.8
DescriptionDefines the items displayed in menu after a click on the primary title.
Note: You can use the <ui5-li></ui5-li> and its ancestors.
TypeArray<ListItemBase>
Since0.10

searchField​

DescriptionDefines the ui5-input, that will be used as a search field.
TypeArray<Input>

startButton​

DescriptionDefines 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.
TypeArray<IButton>

Events​

notifications-click​

DescriptionFired, when the notification icon is activated.
TypeCustomEvent<ShellBarNotificationsClickEventDetail>
ParameterstargetRef: HTMLElement
dom ref of the activated element
BubblesYes
CancelableYes - via preventDefault()

profile-click​

DescriptionFired, when the profile slot is present.
TypeCustomEvent<ShellBarProfileClickEventDetail>
ParameterstargetRef: HTMLElement
dom ref of the activated element
BubblesYes
CancelableNo

product-switch-click​

DescriptionFired, when the product switch icon is activated.
Note: You can prevent closing of overflow popover by calling event.preventDefault().
TypeCustomEvent<ShellBarProductSwitchClickEventDetail>
ParameterstargetRef: HTMLElement
dom ref of the activated element
BubblesYes
CancelableYes - via preventDefault()

logo-click​

DescriptionFired, when the logo is activated.
TypeCustomEvent<ShellBarLogoClickEventDetail>
ParameterstargetRef: HTMLElement
dom ref of the activated element
Since0.10
BubblesYes
CancelableNo
DescriptionFired, when a menu item is activated
Note: You can prevent closing of overflow popover by calling event.preventDefault().
TypeCustomEvent<ShellBarMenuItemClickEventDetail>
Parametersitem: HTMLElement
DOM ref of the activated list item
Since0.10
BubblesYes
CancelableYes - via preventDefault()

search-button-click​

DescriptionFired, when the search button is activated.
Note: You can prevent expanding/collapsing of the search field by calling event.preventDefault().
TypeCustomEvent<ShellBarSearchButtonEventDetail>
ParameterstargetRef: HTMLElement
dom ref of the activated element
searchFieldVisible: Boolean
whether the search field is visible
BubblesYes
CancelableYes - via preventDefault()

Methods​

closeOverflow​

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

CSS Parts​

NameDescription
rootUsed 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.