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"
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 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.
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.
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 menu button. It gets overstyled to match ShellBar's styling.
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.
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.
Closes the overflow area. Useful to manually close the overflow after having suppressed automatic closing with preventDefault() of ShellbarItem's press event