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
In the context of ui5-shellbar, you can provide a custom stable DOM refs for:
Every ui5-shellbar-item that you provide. Example:
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.
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 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.
