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. - branding - branding.name. 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.
Disables the automatic search field expansion/collapse when the available space is not enough. Note: The disableSearchCollapse property is in an experimental state and is a subject to change.
Defines a ui5-button in the bar that will be placed in the beginning. We encourage this slot to be used for a menu button. It gets overstyled to match ShellBar's styling.
Defines the branding slot. The ui5-shellbar-branding component is intended to be placed inside this slot. Content placed here takes precedence over the primaryTitle property and the logo content slot. Note: The branding slot is in an experimental state and is a subject to change.
Define the items displayed in the content area. Use the data-hide-order attribute with numeric value to specify the order of the items to be hidden when the space is not enough. Lower values will be hidden first. Note: The content slot is in an experimental state and is a subject to change.
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.
Fired, when the search cancel button is activated. Note: You can prevent the default behavior (clearing the search field value) by calling event.preventDefault(). The search will still be closed. Note: The search-field-clear event is in an experimental state and is a subject to change.
Type
CustomEvent<ShellBarSearchFieldClearEventDetail>
Parameters
targetRef: HTMLElement dom ref of the cancel button element
Fired, when an item from the content slot is hidden or shown. Note: The content-item-visibility-change event is in an experimental state and is a subject to change.