<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/patterns/generative-ai/navigation-menus/media1_161c9a73e3782837e4f6f7d5c4c0cd19f5473bc04.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_161c9a73e3782837e4f6f7d5c4c0cd19f5473bc04.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_161c9a73e3782837e4f6f7d5c4c0cd19f5473bc04.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/patterns/generative-ai/navigation-menus/media%5C_161c9a73e3782837e4f6f7d5c4c0cd19f5473bc04.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/navigation-menus/media_161c9a73e3782837e4f6f7d5c4c0cd19f5473bc04.png?width=750&format=png&optimize=medium</a>" width="1600" height="640"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/navigation-menus/media1_1e0e4ae89936ed33db93382e18c0680511405db0f.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e0e4ae89936ed33db93382e18c0680511405db0f.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e0e4ae89936ed33db93382e18c0680511405db0f.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/patterns/generative-ai/navigation-menus/media%5C_1e0e4ae89936ed33db93382e18c0680511405db0f.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/navigation-menus/media_1e0e4ae89936ed33db93382e18c0680511405db0f.png?width=750&format=png&optimize=medium</a>" width="1600" height="640"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/navigation-menus/media1_1a993c9c7cac49bb44d4f248676945c126a5c8b5b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1a993c9c7cac49bb44d4f248676945c126a5c8b5b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1a993c9c7cac49bb44d4f248676945c126a5c8b5b.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/patterns/generative-ai/navigation-menus/media%5C_1a993c9c7cac49bb44d4f248676945c126a5c8b5b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/navigation-menus/media_1a993c9c7cac49bb44d4f248676945c126a5c8b5b.png?width=750&format=png&optimize=medium</a>" width="1600" height="640"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/navigation-menus/media1_16f2a878a97ecc7e32c3e7944a35efb25558f3660.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_16f2a878a97ecc7e32c3e7944a35efb25558f3660.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_16f2a878a97ecc7e32c3e7944a35efb25558f3660.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/patterns/generative-ai/navigation-menus/media%5C_16f2a878a97ecc7e32c3e7944a35efb25558f3660.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/navigation-menus/media_16f2a878a97ecc7e32c3e7944a35efb25558f3660.png?width=750&format=png&optimize=medium</a>" width="1600" height="640"> </picture> </div> </div></p>

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Popover Container</strong></div> <div>An over-styled popover container based on the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation%3FpageId%3D2698914869">Popover (Horizon)</a> component.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Dropdown Container</strong></div> <div>An over-styled dropdown container based on the <a href="http%3A%2F%2Flocalhost%3A3001%2Fwiki%2Fdownload%2Fattachments%2F3308794625%2FVD%2520-%2520Parent%2520Menu%2520Item.png%3FpageId%3D2698914322">Menu (Horizon)</a> component.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Parent Menu Item</strong></div> <div>A navigation item type based on the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fdiffpagesbyversion.action%3FpageId%3D2698914322">Menu (Horizon)</a> component.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Child Menu Item</strong></div> <div>A navigation item type based on the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTitle%2BBar%3FpageId%3D2698914322">Menu (Horizon)</a> component.</div> </div>

<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>A</strong></div> <div><strong>Popover Container</strong></div> <div> <p>width: auto;<br>min-width: 10rem;<br>height: auto;<br>padding: 0.75rem;</p> <p>background: var(--sapGroup_ContentBackground);<br>border: none;<br>border-radius: 0.75rem;</p> <p>box-shadow: var(--sapContainer_Shadow2);</p> </div> </div> <div> <div><strong>A1</strong></div> <div><strong>Title (Recommended)</strong></div> <div>Empty content container. Typically contains a title. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation">Title Bar</a> for full specifications.</div> </div> <div> <div><strong>A2</strong></div> <div><strong>Content Container</strong></div> <div> <p>Empty content container. Typically contains Ephasized Menu Items.</p> <p>margin: 0.75rem 0;</p> </div> </div> <div> <div><strong>A3</strong></div> <div><strong>Footer (Optional)</strong></div> <div> <p>Empty content container. Typically contains a horizontal list of buttons. See <a href="https%3A%2F%2Fwiki.one.int.sap%2Fwiki%3Fsrc%3Dcontextnavpagetreemode">Buttons</a> for full specifications.</p> <p>padding: 0.375rem;<br>spacing: 0.1875rem; // space between footer items</p> </div> </div> <div> <div><strong>A4</strong></div> <div><strong>Arrow</strong></div> <div> <p>background: var(--sapGroup_ContentBackground);</p> <p><strong>Top and Bottom Arrows</strong><br>width: 0.75rem;<br>height: 0.375rem;</p> <p><strong>Begin and End Arrows</strong><br>height: 0.75rem;<br>width: 0.375rem;</p> </div> </div> <div> <div><strong>A5</strong></div> <div><strong>Arrow Offset</strong></div> <div>offset: 1.5rem; // from the edge of the popover</div> </div> <div> <div><strong>A6</strong></div> <div><strong>Distance from Trigger</strong></div> <div>offset: -0.3875rem; // The arrow overlaps the trigger. The arrowhead is centered on the trigger.</div> </div>

<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>B</strong></div> <div><strong>Dropdown Container</strong></div> <div> <p>width: auto;<br>min-width: 10rem;<br>height: auto;<br>padding: 0.5rem;</p> <p>background: var(--sapGroup_ContentBackground);<br>border: none;<br>border-radius: 0.5rem;</p> <p>box-shadow: var(--sapContainer_Shadow1);</p> </div> </div> <div> <div><strong>B1</strong></div> <div><strong>Content Container</strong></div> <div>Empty content container. Typically contains Standard Menu Items.</div> </div>

<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>B2</strong></div> <div><strong>Distance From Trigger</strong></div> <div>offset: 0.3875rem;</div> </div> <div> <div><strong>B3</strong></div> <div><strong>Offset</strong></div> <div>offset: 0.5rem;</div> </div>

<div> <div>Preview</div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong><div class="content-wrapper"><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="460" src="<a href="https%3A%2F%2Fsap.sharepoint.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus%3Fversion%3D2%255C%26amp%3BmodificationDate%3D1692974814000%255C%26amp%3Bapi%3Dv2">http://localhost:3001/wiki/download/attachments/3308794625/VD%20-%20Parent%20Menu%20Item.png?version=2\&amp;modificationDate=1692974814000\&amp;api=v2" data-image-src="/wiki/download/attachments/3308794625/VD%20-%20Parent%20Menu%20Item.png?version=2&modificationDate=1692974814000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="3430825844" data-linked-resource-version="2" data-linked-resource-type="attachment" data-linked-resource-default-alias="VD - Parent Menu Item.png" data-base-url="https://wiki.one.int.sap/wiki" data-linked-resource-content-type="image/png" data-linked-resource-container-id="3308794625" data-linked-resource-container-version="51" alt=""></span></p></div></strong></div> <div><strong>C</strong></div> <div><strong>Parent Menu Item</strong></div> <div> <p>width: 100%;<br>min-height: 2rem;<br>padding: 0.5rem;<br>border-radius: var(--sapNavigation_BorderRadius);<br>transition: var(--sapNavigation_Transition);color: var(--sapList_TextColor);</p> <p><strong>Normal State</strong><br>background: var(--sapList_Background);<br>border-bottom: var(--sapContent_Transparent_Border);</p> <p><strong>Hover State</strong><br>background: var(--sapList_Hover_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Active State</strong><br>background: var(--sapList_Active_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Selected State</strong><br>background: var(--sapNavigation_Selected_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Selected State Indicator</strong> width: 0.5rem;<br>height: 0.5rm;<br>sap-icon://circle-task-2<br>color: var(--sapList_SelectionBorderColor);<br>opacity: 1; (opacity:0 in all other states)</p> <p><strong>Focused State</strong><br>background: var(--sapList_Background);<br>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</p> </div> </div> <div> <div><strong>C1</strong></div> <div><strong>Icon</strong></div> <div>width: 1rem;<br>height: 1rem;</div> </div> <div> <div><strong>C2</strong></div> <div><strong>Title</strong></div> <div> <p>width: 100%; (the title takes all the available space)</p> <p>font-size: var(--sapFontSize);<br>font-weight: bold;</p> <p>vertical-align: baseline;</p> </div> </div> <div> <div><strong>C3</strong></div> <div><strong>Has Children Indicator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p>sap-icon://slim-arrow-right</p> </div> </div> <div> <div><strong><br></strong></div> <div><strong>External Link Indicator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p>color: var(--sapContent_LabelColor);</p> <p>sap-icon://arrow-right</p> </div> </div> <div> <div><strong><br></strong></div> <div><strong>Spacing</strong></div> <div>spacing: 0.5rem;</div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>C</strong></div> <div><strong>Emphasised Menu Item</strong></div> <div>min-height: 2.5rem; // content is vertically centered // text is baseline aligned</div> </div>

<div> <div>Preview</div> <div>Element</div> <div></div> <div>All Horizon Themes</div> </div> <div> <div><strong><div class="content-wrapper"><p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image" draggable="false" width="460" src="<a href="https%3A%2F%2Fsap.sharepoint.com%2Fwiki%2Fpages%2Fviewpage.action%3Fversion%3D2%255C%26amp%3BmodificationDate%3D1692974812000%255C%26amp%3Bapi%3Dv2">http://localhost:3001/wiki/download/attachments/3308794625/VD%20-%20Child%20Menu%20Item.png?version=2\&amp;modificationDate=1692974812000\&amp;api=v2" data-image-src="/wiki/download/attachments/3308794625/VD%20-%20Child%20Menu%20Item.png?version=2&modificationDate=1692974812000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="3430825843" data-linked-resource-version="2" data-linked-resource-type="attachment" data-linked-resource-default-alias="VD - Child Menu Item.png" data-base-url="https://wiki.one.int.sap/wiki" data-linked-resource-content-type="image/png" data-linked-resource-container-id="3308794625" data-linked-resource-container-version="51" alt=""></span></p></div></strong></div> <div><strong>D</strong></div> <div><strong>Child Menu Item</strong></div> <div> <p>width: 100%;<br>min-height: 2rem;<br>border-radius: 0.375rem;<br>padding: 0.5rem;</p> <p>transition: background-color 0.3s ease-in-out;</p> <p>color: var(--sapList_TextColor);</p> <p><strong>Normal State</strong><br>background: var(--sapList_Background);<br>border-bottom: var(--sapContent_Transparent_Border);</p> <p><strong>Hover State</strong><br>background: var(--sapList_Hover_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Active State</strong><br>background: var(--sapList_Active_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Selected State</strong><br>background: var(--sapNavigation_Selected_Background);<br>border: var(--sapContent_Transparent_Border);</p> <p><strong>Selected State Indicator</strong> width: 0.5rem;<br>height: 0.5rm;<br>sap-icon://circle-task-2<br>color: var(--sapList_SelectionBorderColor);<br>opacity: 1; (opacity:0 in all other states)</p> <p><strong>Focused State</strong><br>background: var(--sapList_Background);<br>border: none;<br>outline: var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);</p> </div> </div> <div> <div><strong>D1</strong></div> <div><strong>Title</strong></div> <div> <p>width: 100%; (the title takes all the available space)</p> <p>font-size: var(--sapFontSize);text-overflow: ellipsis;</p> </div> </div> <div> <div><strong>D2</strong></div> <div><strong>Has Children Indicator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75em;</p> <p>sap-icon://slim-arrow-right</p> </div> </div> <div> <div><strong><br></strong></div> <div><strong>External LInk Indicator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p>color: var(--sapContent_LabelColor);</p> <p>sap-icon://arrow-right</p> </div> </div> <div> <div><strong><br></strong></div> <div><strong>Spacing</strong></div> <div>spacing: 0.5rem;</div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>D</strong></div> <div><strong>Standard Menu Item</strong></div> <div>min-height: 2.5rem; // content is vertically centered // text is baseline aligned</div> </div>

<div> <div></div> <div>UI Element</div> <div>Description</div> </div> <div> <div><strong>E1</strong></div> <div><strong>Parent Navigation Item</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2F~I310169%23VerticalNavigation-ParentNavigationItem">Vertical Navigation#ParentNavigationItem</a> for full specifications.</div> </div> <div> <div><strong>E2</strong></div> <div><strong>Child Navigation Item</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FButtons%23VerticalNavigation-ChildNavigationItem">Vertical Navigation#ChildNavigationItem</a> for full specifications.</div> </div>