Intro

These visual specifications should serve as a guideline for Front-End Developers on how implement this control.

Shell Bar – UI5 Components Overview

Annotated anatomy diagram of the Shell Bar. Seven lettered callouts (in magenta) label the key components: (A) the hamburger menu icon, (B) the app name with a globe icon reading "App Name", (C) the breadcrumb navigation showing "Parent item / 1st child item / Current item", (D) the search icon, (E) the Just Ask icon, (F) the user avatar photo, and (G) the full Shell Bar component at the top center. Additional icons visible between callouts D–F include the Joule icon, Notifications bell icon, Just Ask, Search to Insight, Collaboration, Feedback, Help, and an overflow (ellipsis) menu button.

Value Description Details
A Toggle Button UI5 Web Components: Toggle Button
SAP Web UI Kit: Button
B Button UI5 Web Components: Button
SAP Web UI Kit: Button
C Breadcrumbs UI5 Web Components: Breadcrumbs
SAP Web UI Kit: Breadcrumbs
Color: --sapTextColor
D Shell Bar Search UI5 Web Components: Shell Bar Search
E Icon Button UI5 Web Components: Button
SAP Web UI Kit: Icon Button
F Avatar UI5 Web Components: Avatar
SAP Web UI Kit: Avatar
G Shell Bar UI5 Web Components: Shell Bar

Annotated anatomy diagram of the Shell Bar with the object name popover open. Four lettered callouts (in magenta) label: (H) a separator line, (I) the "Object Name" menu button (highlighted in blue, indicating it is active/selected), (J) the open popover, and (K) the breadcrumb path inside the popover reading "Parent item / 1st child item / Current item". The popover displays the heading "Object Name" above the breadcrumb.

Value Description Details
H Item Separator SAP Web UI Kit: Separator
I Shell Menu Button UI5 Web Components: Menu Button
SAP Web UI Kit: Menu Button

Text size: --sapFontSize
Weight: --sapFontSemiboldDuplexFamily

Gap: 0.375rem
Icon: sap-icon://slim-arrow-down
J Popover UI5 Web Components: Popover
SAP Web UI Kit: Popover
K Breadcrumbs UI5 Web Components: Breadcrumbs
SAP Web UI Kit: Breadcrumbs

Annotated diagram of the Shell Bar showing the app name in standalone context. A single magenta callout labeled (L) points to the app name "Analytics Cloud", displayed in blue text without a globe icon or object name. The shell bar includes the hamburger menu, back arrow, and SAP logo on the left, followed by the standard action icons on the right.

Value Description Details
L Product Name Native UI5: Text
Color: --sapShell_SubBrand_TextColor
Font-family: @sapFontFamily
Font-weight: @sapFontSemiboldFamily
Font-size: 1rem

Shell Bar – Padding

Spacing annotation diagram of the Shell Bar with lettered callouts identifying the measured gaps. Four magenta pin markers and black letter labels indicate the positions of horizontal spacing: (A) the left outer edge before the hamburger menu, (B) the gap between the hamburger menu and the back arrow, (C) the gap between the app name ("Stories"), separator line, and the shell menu button ("canada-story-10"), and (D) the spacing between the right side actions and the user avatar. Pink highlight bars visually mark each spacing interval.

Value Description Details
A Left Container Padding Left padding before navigation icon: 0.875rem
B Spacing between Leading Icons Padding between menu and back icons: 0.5rem
C Spacing around Separator Padding between App Name and Separator: 0.5rem
Padding between Separator and Shell Menu Button: 0.5rem
D Right Container Padding Padding between shell actions and Avatar: 0.5rem