Components/Shellbar

fd-shellbar · 5 examples from SAP's documentation · Back to the gallery

About

The Shell Bar serves as the topmost section across all SAP products, providing users with a way to orient themselves within the diverse SAP product landscape. It is always visible and offers relevant information about the current context, including product and brand details, while also providing access to specific functions such as search, notifications, user profiles, and more. **Shellbar has two primary container groups:**

Shell Bar with Mandatory Elements

The Shell Bar has 2 mandatory components: Branding: Visual branding elements, such as the SAP or company logo (mandatory), the Product Name (mandatory) and Solution Name (optional). Clicking on the Branding navigates users back to the product's home page. Use the official SAP product name and logo by default, allowing customers to customize the logo and sub-brand text if needed, but avoid including "SAP" in the product name. The solution name, optional and limited to 40 characters, should only be used with the product name in exceptional cases and not for app names or navigation. User Profile: offers access to user-specific settings and displays either an image or initials.

Shell Bar with Optional Elements

The following elements of the Shell Bar are optional: Side Navigation Button: expands or collapses a vertical navigation panel for local navigation, and is mandatory in the Shell Bar if side navigation is used. In this case, the left spacing is fixed to 0.875rem to ensure alignment with the navigation panel. Right spacing is fixed to 1rem. Back Button: back navigation Additional Context Area: for containers holding product-related elements like system or status information, and should include components relevant to the entire product, not specific applications, while avoiding content meant for other Shell Bar elements. Search: the search field in the Shell Bar can be expanded or collapsed based on screen size, and on smaller screens (S), it may be collapsed or moved to the overflow menu if multiple action icons are present. Joule: AI Assistant Notifications: are optional, but if enabled, the icon will display with a badge indicating the notification count. Additional Actions: You can add unlimited custom actions to the Shell Bar, but it's recommended to limit them to seven, ensuring they impact the entire product, use icon-only buttons, and include tooltips. The order is flexible, except for the Support action, which is always placed on the right. Help: used to trigger the help functionality within products. Feedback: used to trigger the "Leave Feedback" functionality within products. Product Switch: used for global navigation, allowing users to switch between different SAP products and services. Separator: creates a small distance between elements in additional context area. Spacer: creates space between groups of elements in context area. Visually separates the context area into left and right group.

ResponsivePaddings

When Side Navigation is displayed, the left and right spacing is fixed at 1rem (16px) for alignment with the navigation panel. Without Side Navigation, the Shell Bar follows the Responsive Spacing System: 1rem for Size S, 2rem for Sizes M and L, and 3rem for Sizes XL and XXL (48px). Apply fd-shellbar--responsive-paddings modifier class for responsive paddings, and fd-shellbar--side-nav for fix paddings with Side Navigation.

Actions in Overflow Toolbar

Controls like Search, Notifications, Joule, Help, and Feedback can be placed inside an Overflow Toolbar(clear type).

Actions in Overflow Toolbar

Truncation and overflow logic of Shell Bar are based on priorities, such as when a component with a higher priority takes precedence over an element with a lower priority. For all screen sizes the following elements are always displayed: Side Navigation Button (if used) Avatar (User Menu) Product Switcher (if used) XXL (1920=>) / XL (1440 – 1919) / L (1024 - 1439) / M (600 - 1023) Visible items: Hamburger Menu Branding (Logo + Product Name) Additional context area Search positioned right (expanded or collapsed) Shell Actions Buttons (visible or hidden under overflow) User Profile Product Switcher S (599 Visible items: Hamburger Menu Branding (Logo) Additional context area Overflow Button with all Shell Actions including search & notifications (if there are more than 1 action) User Profile Product Switcher Overflow The overflow is displayed via a Popover and is used when there is more than one action available; the button should show a toggled state when the Popover is active.