<a href="/wiki/display/CPDesign/User+Menu">User Menu</a>

Created by Milanov, Kalin, last modified on Oct 04, 2023

Overview

The User Menu offers a range of options that are specific to the user and is accessible on all BTP tool screens. Users can access it by clicking on the avatar on the end side of the Tool Header. Apart from always available options, the User Menu can also contain tool-specific actions.

FIORITECHP1-26800 - Getting issue details... STATUS

Look and Feel

<p><div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/user-menu/media1_14bd06555f52fca608ed8cd9bca39062d29d204ed.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_14bd06555f52fca608ed8cd9bca39062d29d204ed.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_14bd06555f52fca608ed8cd9bca39062d29d204ed.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media%5C_14bd06555f52fca608ed8cd9bca39062d29d204ed.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media_14bd06555f52fca608ed8cd9bca39062d29d204ed.png?width=750&format=png&optimize=medium</a>" width="1600" height="1200"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/user-menu/media1_1794450b2cfaf6a8fed6c040f70cfd296e0f9a791.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1794450b2cfaf6a8fed6c040f70cfd296e0f9a791.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1794450b2cfaf6a8fed6c040f70cfd296e0f9a791.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media%5C_1794450b2cfaf6a8fed6c040f70cfd296e0f9a791.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media_1794450b2cfaf6a8fed6c040f70cfd296e0f9a791.png?width=750&format=png&optimize=medium</a>" width="1600" height="1200"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/user-menu/media1_1702435b7f2f55e6325d2a52c65f5d1596ed639d8.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1702435b7f2f55e6325d2a52c65f5d1596ed639d8.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1702435b7f2f55e6325d2a52c65f5d1596ed639d8.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media%5C_1702435b7f2f55e6325d2a52c65f5d1596ed639d8.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media_1702435b7f2f55e6325d2a52c65f5d1596ed639d8.png?width=750&format=png&optimize=medium</a>" width="1600" height="1200"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/components/tool-shell/user-menu/media1_1bf0ed9af4f730f147f056359a5bb4c4abd07978b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bf0ed9af4f730f147f056359a5bb4c4abd07978b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bf0ed9af4f730f147f056359a5bb4c4abd07978b.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media%5C_1bf0ed9af4f730f147f056359a5bb4c4abd07978b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/components/tool-shell/user-menu/media_1bf0ed9af4f730f147f056359a5bb4c4abd07978b.png?width=750&format=png&optimize=medium</a>" width="1600" height="1200"> </picture> </div> </div></p>

Anatomy

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Popover Container</strong></div> <div>This is the main container of the User Menu content. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus">Navigation Menus</a> for full specifications.</div> </div> <div> <div><strong>B</strong></div> <div><strong>User Menu Header</strong></div> <div>A custom Popover Container header.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Emphasized Menu Items</strong></div> <div>These are the main menu items of the User Menu. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus%23NavigationMenus-ParentMenuItem">Navigation Menus#ParentMenuItem</a> for full specifications.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Dropdown Container</strong></div> <div>This is the secondary container for the sub-items of the User Menu. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus">Navigation Menus</a> for full specifications.</div> </div> <div> <div><strong>E</strong></div> <div><strong>Standard Menu Item</strong></div> <div>These are the menu items for the content in the secondary sub-menus. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus%23NavigationMenus-ChildMenuItem">Navigation Menus#ChildMenuItem</a> for full specifications.</div> </div> <div> <div><strong>F</strong></div> <div><strong>Footer Bar</strong></div> <div>This is the container for the Sign In and Sign Out buttons. See the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus">Navigation Menus</a> and <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%3Fsrc%3Dcontextnavpagetreemode">Buttons</a> for full specifications.</div> </div>

Desktop Specification

<div> <div></div> <div>Element</div> <div>Morning Horizon</div> <div>Evening Horizon</div> <div>Horizon HCB</div> <div>Horizon HCW</div> </div> <div> <div><strong>B1</strong></div> <div><strong>Header Container</strong></div> <div> <p>width: 100%;<br>height: auto;</p> <p>padding: 0.75rem, 0;<br>margin-bottom: 0.75rem;</p> <p>background: transparent;</p> </div> </div> <div> <div><strong>B2</strong></div> <div><strong>Avatar</strong></div> <div> <p>width: 6rem;<br>height: 6rem;</p> <p><strong>Initials</strong><br>font-size: 2.375rem;</p> <p><strong>Icon</strong><br>width: 3rem;<br>height: 3rem;</p> </div> </div> <div> <div><strong>B3</strong></div> <div><strong>Title</strong></div> <div> <p>width: 100%;<br>height: auto;</p> <p>margin-top: 0.75rem;</p> <p>font-family: var(--sapFontBlackFamily);<br>font-size: 1.25rem;<br>line-height: 1.3;<br>color: var(–sapTitleColor);</p> </div> </div> <div> <div><strong>B4</strong></div> <div><strong>Subtitle</strong></div> <div>font-family: var(--sapFontFamily);<br>font-size: var(--sapFontSize);<br>line-height: var(--sapContent_LineHeight);<br>color: var(–sapContent_LabelColor);</div> </div> <div> <div><strong>F</strong></div> <div><strong>Footer Bar</strong></div> <div> <p>See the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus%3Fsrc%3Dcontextnavpagetreemode">Navigation Menus</a> and <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%3Fsrc%3Dcontextnavpagetreemode">Buttons</a> for full specifications.</p> <p>margin-top: 0.75rem;</p> <p><strong>Sign In Button</strong><br>Use primary button style.</p> <p><strong>Sign Out Button</strong><br>Use secondary button style.</p> </div> </div>

Tablet Specification

The interaction behavior for desktop and tablet is identical. The only difference is in the sizes of the components used.

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>C</strong></div> <div><strong>Emphasized Menu Items</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FMenus%23Menus-EmphasizedMenuItem">Emphasized Menu Item</a> for full specifications. // increase in size</div> </div> <div> <div><strong>E</strong></div> <div><strong>Standard Menu Item</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FMenus%23Menus-StandardMenuItem">Standard Menu Item</a> for full specifications. // increase in size</div> </div> <div> <div><strong>F</strong></div> <div><strong>Footer Bar</strong></div> <div>See the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus%3Fsrc%3Dcontextnavpagetreemode">Navigation Menus</a> and <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%3Fsrc%3Dcontextnavpagetreemode">Buttons</a> for full specifications. // increase in size</div> </div>

Phone Specification

For mobile phones, in addition to tablet deltas, the cascading of menus happens in place. In the sub-menus, a title with a back button appears.

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>B</strong></div> <div><strong>Title Bar</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTitle%2BBar%3Fsrc%3Dcontextnavpagetreemode">Title Bar</a> for full specifications. Also, see <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FMenus%23Menus-Responsiveness">Responsiveness</a> for cascading containers for specifics.</div> </div>