Intro

The shell bar is a universal header at the top of all screens. It offers both global functions (like search, notifications, and user profile) and elements that are specific to the product context.

Shell bar

Anatomy

Anatomy of the shell bar

1. Side navigation: Allows users to open or close, as well as expand or collapse, the side navigation menu.
2. Back: Enables users to return to the previous page or state within the application.
3. Branding element (mandatory): The branding element consists of two parts:
   a. SAP logo: Indicates that the product is part of the SAP product family.
   b. Product identifier: Unique name that helps the user understand the specific context within the SAP portfolio.
   When selecting the branding element, the user navigates to the product home page. The home page is the primary or initial page users encounter when accessing the product.
4. Additional context area: Contains specific elements applicable to the entire product. Elements can be positioned within two containers: one aligned to the left and the other to the right. You can prioritize these elements to ensure that higher-priority elements remain visible longer than lower-priority elements as the available space decreases.
5. Search: A search input field or button that expands the search bar, enabling users to search within the product or across multiple products. We recommend expanding the search field by default.
   [internal_only]There is a dedicated UX consistency product standard for the shell search: UXC-025 – Shell Search.[/internal_only]
6. Joule: Launches SAP’s AI assistant, Joule.
7. Notifications: Displays notifications.
8. Additional actions: A section for further actions that are defined by the product.
9. Help (mandatory): Provides access to integrated help functionality.
10. Profile (mandatory): Provides access to the user menu.
    [internal_only] There is a dedicated UX consistency product standard for the user menu: UXC-020 – User Menu [/internal_only]
11. Product switch: Offers access to other products.

Back Button

Avoid using a Back button in the shell bar; use the browser's Back button instead. Only use the shell bar Back button if you can’t rely on the browser Back button due to technical limitations.

Only show the shell bar Back button if back navigation within the product is possible. Hide the Back button if there is no back history (for example, upon initial launch or when deep linking).

Additional Actions

Only add actions to the shell bar if users need to access them frequently. Don’t replicate shell bar actions in other areas of the product, such as the user menu or side navigation.

Responsiveness

The shell bar is fully responsive. When space is limited, it collapses or hides elements in the following order:

1. The search field collapses first to keep other content visible.
2. Next, additional shell actions move to an overflow menu. The user menu and product switch icon remain in place.
3. Then, additional context elements are hidden based on priority: the lowest-priority element hides first, and the highest-priority last. Elements in the additional context area don’t have automatic overflow behavior. However, when an additional context element is hidden, it’s possible to listen for these events and adjust how the component is represented – for example, by switching to a minified version.
4. The product identifier part of the branding element is hidden.
5. If there isn’t enough space to show both the highest-priority context element and the search icon, the search function also moves to the overflow menu.

Example

The example below shows how elements are collapsed or hidden as the screen width is reduced:

• Size XL: All elements are visible, and the search field is expanded.
• Size L: The search field is collapsed, all other elements are still visible.
• Size M: The additional shell actions have moved to the overflow menu. In addition, 2 of 4 elements in the additional context area are now hidden (lowest-priority elements).
• Size S: The product identifier in the branding element is now hidden.
• Only the top-priority element in the context area remains.

Shell bar – responsive behavior

Badge Overflow

One badge

If a single action with a badge moves into the overflow menu, the counter is also shown on the overflow button.

Badge overflow – single action

More than one badge

If multiple actions with a badge move into the overflow menu, only the attention indicator is shown on the overflow button.

Badge overflow – multiple actions

Additional Context Examples

Trial System

A trial system is a temporary setup that allows users to test and evaluate a product or service before making a commitment to purchase or implement it. It provides a hands-on experience, enabling users to explore features, assess performance, and determine if it meets their needs.

To indicate a trial system, use the tag web component with color scheme 7 from set 2. In addition, you can also show the remaining days.

Trial system

Multiple Productive Systems

To differentiate between multiple productive systems for the same product, use the tag web component. We recommend using color scheme 10 from set 2.

Multiple productive systems

Non-Productive Systems

To differentiate between multiple non-productive systems for the same product (for non-admins), use the tag web component. We recommend using color scheme 8 from set 2.

Non-productive systems

Related Links