Overview
The Tool Header is the most common and most distinct visual element of any BTP tool. It is the leading carrier of coherency across tools and holds company branding. The Tool Header provides predictable placement of navigation, search, notifications, settings, and personalization options.
Look and Feel
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
When to Use
All BTP tools are required to use the Tool Header. It is available both as a standalone component and as part of the Tool Page Layout component.
Recommended
- Use the Tool Header to show navigation options, either horizontal or vertical.
- Use the Tool Header to switch between multiple instances (ex. Workspace, account, project, tenant, etc.).
Not Recommended
- Avoid using the Tool Header for tools integrated into the Fiori Launchpad. Use Shell Bar instead.
Anatomy
Logo (Mandatory)
The SAP logo is a mandatory element for all tools. Use the following resource file for the correct logo sizes in the tool header.
- Prefer SVG over PNG format for the logo.
- The logo should be visible on all devices.
- Clicking the logo navigates to the home screen.
- Avoid resizing or modifying the logo.
- Avoid placing the logo elsewhere on the screen.
- Avoid using another tool-specific branding.
See also:
Product Name (Mandatory)
The SAP product name is a mandatory field for all products. It carries the identity of the product and is essential for accessibility purposes.
- The name should not contain SAP in front of it.
- The name should be the official product name.
- The name can display a suite (ex. Data Suite).
- Avoid using abbreviations (ex. SAC, DWC, etc.).
See also:
SAP Brand Tools - Naming Center
Second Title
The Second Title is an optional title used for additional product information.
- The title should add meaningful information.
- The title can display a product in a suite.
- Avoid using the title, unless necessary.
- Avoid using the title as breadcrumbs.
Global Search
Search is an optional element and should be used to perform a global search on all product content. Using the search should take the user to a search results page.
Global Search
See also:
Enterprise Search - Results List
Notifications
Notifications are an optional product feature. If present, display a notifications button using the bell icon. Clicking the button shows a popover that contains the notifications.
Notifications
See also
Notifications - Design Guideline
Avatar
Avatar is a mandatory product feature. Clicking on the Avatar shows the User Menu that contains personalization settings, help, legal information, and the option to sign out.
Avatar - Icon
Display a user icon in the avatar if the user is not Signed In.
Avatar - Initials
Display initials in the avatar if the user is Signed In and has not provided an avatar image.
Avatar - Image
Display image in the avatar if the user is Signed In and has provided an avatar image.
- Use the following avatar content hierarchy:
Image > Initials > Icon
- Avoid using other icons in the avatar
- Avoid using buttons to prompt users to sign in
See also
Menu
The Menu is a mandatory feature for products that use the Vertical Navigation Variant. Clicking on the button has one of the following effects:
- Shows/hides the Vertical Navigation - Popup
- Expands the Vertical Navigation - Snapped
- Snaps the Vertical Navigation - Expanded
Tools that use Horizontal Navigation must not use the Menu Icon.
Menu Button
Responsive Behavior
On phones, the Menu Icon is mandatory for all products regardless of their chosen navigation option.
See also
Custom Actions
It is possible to add custom actions to the Tool Header.
Custom Actions
- Custom actions should affect the entire product
- Custom actions should use icon-only buttons
- Custom actions should have tooltips
- Avoid using custom actions for navigation
- Avoid using too many custom actions
Custom action should be placed in a certain order in the reading direction of the UI. Custom actions should be placed between the search and the notifications actions.
- Custom actions
- Generative AI
- Give Feedback
- Help
Separator
The separator is an invisible element that creates a small distance between Tool Header elements. It helps visually distinguish the consistently present Notifications and Settings from Custom Actions.
Separator
Keyboard Handling
Tool Header - Keyboard Handling
Screen Reader
Tool Header - Screen Reader
Responsiveness
The Tool Header is a responsive component, and its content adapts to various screen widths. On mobile devices, the content of the Tool Header enters a Cozy mode to allow for touch-based interactions.
Responsiveness
Note that on smaller screen sizes the actions overflow in the following order.
- Custom Actions
- Generative AI
- Give Feedback
- Help
- Product Switch
Tablet Behavior
Global Search
On tablet screen sizes, the Tool Header no longer displays the Global Search in its expanded form. Instead, the search appears as a button. Taping on that button expands it into a search field that covers all Custom Actions if present. On portrait orientation, the search field also covers the Second Title. Taping outside the search field collapses it back to a button.
Anatomy - Tablet
Phone Behavior
Responsive behavior on mobile phones follows the behavior on portrait-oriented tablets. On phones, the Product Name and Second Title are no longer displayed. The Menu is always visible.
Global Search
Just as on tablets, the search field appears as a button. Taping it expands the search to cover the entire area of the Tool Header. Left of the search field, a Back Button collapses the search to a button. On the right, a Microphone button triggers voice-enabled text input in the search field.
Anatomy - Phone
Custom Actions Overflow
On phones, custom actions appear as an overflow button. Taping that button shows a popover that contains the custom actions. If all the main actions (Search, Notifications, Settings) are available, the Settings action overflows too. A separator between the Settings and Custom Actions also appears if that is the case.
Overflow
Resources
Design
Tool Header - Visual Design Specification
Code Samples
Web Components
Leave Feedback