Intro

The Shell Bar component appears at the top of all product pages.

When to Use

Anatomy

1. Hamburger Button: This button triggers the side navigation to open or close.
2. Back Button (optional): Has the same functionality as browser back.
3. Logo: The logo of the customer using the product.
4. App Name (optional): This is the name of the application and is only displayed on the Home Page.
5. Search: Allows the user to search for content throughout the entire product. It is expandable once clicked. The select functionality will not be available in SAC, DSP, and BDC.
6. Actions: These are a collection of product-wide actions such as Notifications, Joule, etc.
7. User Profile: This is where the user can access their profile settings and is shown using an avatar.
8. Breadcrumbs (optional): This is only displayed in Applications to show navigation path within SAC / DSP / BDC.
9. Favorite Button (optional): This is only displayed in Application Objects to allow users to ‘Favorite’ an object.
10. Close Button (optional): This is only displayed in Application Objects to allow users to ‘Close’ an object.

Shell Bar - Administrative App & Application Object Popover

Variants

Shell Bar for Home Screen

The Home Screen for BDC&I products has the product name (ie. ‘Analytics Cloud’, ‘Datasphere’, ‘Business Data Cloud’) in the Shell Bar beside the product logo.

For companies that don’t use a custom company logo and keeps the SAP logo, only the product name (ie. ‘Analytics Cloud’) should be written beside the SAP logo.

For companies with a custom logo (ie. no SAP logo), the full product name should be written (ie. ‘SAP Analytics Cloud’, ‘SAP Datasphere’, ‘SAP Business Data Cloud’).

Shell Bar for SAC Home Screen

Shell Bar for Administrative Apps

The Shell Bar for administrative apps (ie. File Repository, Transport, Security, etc.) in BDC&I has a set of breadcrumbs to allow the user to view their navigation path and also go back-and-forth folder layers. This uses a variant of the traditional Breadcrumb component that visualizes the location of an object within a folder structure.

1. App Name: The name of the application being used.
2. Parent Breadcrumb: These are breadcrumbs that contain the current item the user is on. Parent breadcrumbs are not bolded.
3. Current Breadcrumb: This is the current level the user is on. It will be bolded to indicate it is the current item.

Shell Bar for SAC Administrative Apps

Shell Bar for Administrative Apps with Parent Apps

Certain applications within BDC&I have parent ‘apps’. These includes applications such as Import and Export which are both children of ‘Transport’ or Roles and Users which are both children of ‘Security’.

For these situations, the breadcrumb pattern remains the same as for Administrative Apps, but the icon beside the app name shows the current app the user is on, not the parent app.

1. App Icon: The icon of the application the user is currently using.

Shell Bar for SAC Administrative Apps with Parent Apps - Do's and Don'ts

Shell Bar for Application Objects

The Shell Bar for application objects (ie. Stories, Models, Analytic Applications, etc.) in SAC has a set of breadcrumbs to allow the user to view their navigation path and also go back-and-forth through folder layers. This breadcrumb does not use the traditional Breadcrumb component and consists of two sections separated by a divider:

1. App Name: The name of the application being used.
2. Application Object Name: The name of the specific object the user is in.
3. Favorite Button: This is only displayed for Application Objects to allow users to ‘Favorite’ an object.
4. Close Button: This is only displayed for Application Objects to allow users to ‘Close’ an object.

Shell Bar for SAC Application Objects

Shell Bar with Spaces

The Shell Bar for Applications in SAC (ie. Repository Explorer, Transport, Security, etc.) and DSP (ie. Business Builder, Graph Builder, Data Builder, etc.) have another layer of breadcrumbs to denote the ‘space’ a user is currently in. The hierarchy is as shown below:

1. App Name: The name of the application being used.
2. Space Name: The name of the specific space the user is on.
3. Parent Breadcrumb: These are breadcrumbs that contain the current item the user is on. Parent breadcrumbs are not bolded.
4. Current Breadcrumb: This is the current level the user is on. It will be bolded to indicate it is the current item.
5. Application Object Name: This is the current level the user is on. It is a menu button that represents the name of an object.
6. Favorite Button: This is only displayed for Application Objects to allow users to ‘Favorite’ an object.
7. Close Button: This is only displayed for Application Objects to allow users to ‘Close’ a an object.

Shell Bar for Administrative Apps with Spaces

Shell Bar for Application Objects with Spaces

Behavior and Interaction

Breadcrumb Navigation

The Shell Bar breadcrumbs serve as a method of navigation for users to go back-and-forth different nested layers for files, objects, etc.

Navigating Administrative App Layers Using Shell Bar Breadcrumbs

Truncation Logic

For situations where the product needs to be displayed on smaller screen sizes, the Shell Bar’s breadcrumbs accommodate responsive layouts. The below image shows the truncation logic of the breadcrumbs. For information on general Shell Bar truncation logic, refer to the Shell Bar IXD Specification.

Breadcrumb Truncation Logic

Popover for Application Object (SAC)

The application object within the Shell Bar is represented by a menu button that opens a popover which directs the user to the folder location of the respective Application Object within the File Repository (SAC) or Repository Explorer (DSP).

Application Object Popover Behaviour

In the case where, there are extremely long breadcrumbs, the breadcrumbs should be fully truncated with the exception of the current item. The truncated breadcrumbs should be visible within a menu when the user clicks the overflow breadcrumb.

Application Object Popover Behaviour with Extremely Long Breadcrumb

Related Links