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