BTP/Tool Header
fd-tool-header · 3 examples from SAP's documentation · Back to the gallery
About
> **⚠️ DEPRECATED**: This component is deprecated and should not be used in new projects. The Tool Header exists on all BTP tools. It is the uppermost section of the tool. It is always visible to give users access to various functions. This component is deprecated. Please use the SHELLBAR component instead.
- fd-tool-header - (required) Tool Header Container element. Holds all Tool Header UI elements - fd-tool-header--menu - if the Tool Header has a Menu Button - fd-tool-header__group - groups UI elements. The spacing between the groups is 0.75rem; - fd-tool-header__group--hidden - modifier class to hide an entire group; - fd-tool-header__group--menu - modifier class for the group element that contains the Menu Button; - fd-tool-header__group--center - modifier class for the group element that contains the Search/Context Switch; - fd-tool-header__group--actions - modifier class for the group element that contains the custom and system actions; - fd-tool-header__element - a wrapping HTML element around every UI control. The spacing between individual elements in the group is 0.375rem; - fd-tool-header__element--hidden - modifier class to hide an element depending on the screen size; - fd-tool-header__logo - (required) the logo is the logo of the company using the tool. The SAP logo is used as default. The logo is an interactive element that always navigates to the tool's homepage. - fd-tool-header__product-name - (required) the Product Name is the official name of the tool. - fd-tool-header__second-title - the Second Title is an optional second text identifier of the tool. - fd-tool-header__separator - The Separator is an optional element that adds space between the Custom Actions Area (optional), System Actions Area (optional) and User Avatar (required). - fd-tool-header - (required) Tool Header Container element. Holds all Tool Header UI elements - fd-tool-header--menu - if the Tool Header has a Menu Button - fd-tool-header__group - groups UI elements. The spacing between the groups is 0.75rem; - fd-tool-header__group--hidden - modifier class to hide an entire group; - fd-tool-header__group--menu - modifier class for the group element that contains the Menu Button; - fd-tool-header__group--center - modifier class for the group element that contains the Search/Context Switch; - fd-tool-header__group--actions - modifier class for the group element that contains the custom and system actions; - fd-tool-header__element - a wrapping HTML element around every UI control. The spacing between individual elements in the group is 0.375rem; - fd-tool-header__element--hidden - modifier class to hide an element depending on the screen size; - fd-tool-header__logo - (required) the logo is the logo of the company using the tool. The SAP logo is used as default. The logo is an interactive element that always navigates to the tool's homepage. - fd-tool-header__product-name - (required) the Product Name is the official name of the tool. - fd-tool-header__second-title - the Second Title is an optional second text identifier of the tool. - fd-tool-header__separator - The Separator is an optional element that adds space between the Custom Actions Area (optional), System Actions Area (optional) and User Avatar (required).
Desktop
When menu button is present use the fd-tool-header--menu modifier class with the fd-tool-header base class. Additionally, apply the fd-tool-header__group--menu modifier to the fd-tool-header__group wrapping element.
Without Menu Button (default)
With Menu Button
Tablet
The second title is not displayed on tablets. The separator between the actions areas is hidden on tablet portrait orientation. The separator between the actions and the user avatar is present in all views.
Tablet - Landscape
Tablet - Portrait
Tablet - Portrait (Expanded Search)
Mobile
Phone specification depicts only deltas from the tablet specification. It is possible that actions will overflow on phones. In such cases, the overflowing actions are displayed in a dropdown menu. The Product Name, Second Title, and Separator between the actions areas are not displayed on phones.
Phone
Phone (Expanded Search)