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.
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"
Defines 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.
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.
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.
Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event