<p><div> <div><strong>Morning Horizon</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/horizontal-mavigation/media1_1f96f5e932ba2b49b752e800c795036c0d7cedf4a.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f96f5e932ba2b49b752e800c795036c0d7cedf4a.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f96f5e932ba2b49b752e800c795036c0d7cedf4a.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/horizontal-mavigation/media%5C_1f96f5e932ba2b49b752e800c795036c0d7cedf4a.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/horizontal-mavigation/media_1f96f5e932ba2b49b752e800c795036c0d7cedf4a.png?width=750&format=png&optimize=medium</a>" width="3000" height="934"> </picture> </div> </div> <div> <div><strong>Evening Horizon</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/horizontal-mavigation/media1_13f04499f99c4c9e354027ad692fd24b496b88b7e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_13f04499f99c4c9e354027ad692fd24b496b88b7e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_13f04499f99c4c9e354027ad692fd24b496b88b7e.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/horizontal-mavigation/media%5C_13f04499f99c4c9e354027ad692fd24b496b88b7e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/horizontal-mavigation/media_13f04499f99c4c9e354027ad692fd24b496b88b7e.png?width=750&format=png&optimize=medium</a>" width="3000" height="934"> </picture> </div> </div> <div> <div><strong>Horizon HCB</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/horizontal-mavigation/media1_1f44366fe08aa38c5c39cb535216f6211a404aeb6.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1f44366fe08aa38c5c39cb535216f6211a404aeb6.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1f44366fe08aa38c5c39cb535216f6211a404aeb6.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/horizontal-mavigation/media%5C_1f44366fe08aa38c5c39cb535216f6211a404aeb6.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/horizontal-mavigation/media_1f44366fe08aa38c5c39cb535216f6211a404aeb6.png?width=750&format=png&optimize=medium</a>" width="3000" height="934"> </picture> </div> </div> <div> <div><strong>Horizon HCW</strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/horizontal-mavigation/media1_1bc5803273c89ccc5e64bcbae165104de3fc89092.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bc5803273c89ccc5e64bcbae165104de3fc89092.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bc5803273c89ccc5e64bcbae165104de3fc89092.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/horizontal-mavigation/media%5C_1bc5803273c89ccc5e64bcbae165104de3fc89092.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/horizontal-mavigation/media_1bc5803273c89ccc5e64bcbae165104de3fc89092.png?width=750&format=png&optimize=medium</a>" width="3000" height="934"> </picture> </div> </div></p>

<div> <div></div> <div>Element</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Navigation Container</strong></div> <div>The navigation container holds all aspects of the navigation. It is always visible. It controls the spacing between navigation elements.</div> </div> <div> <div><strong>B</strong></div> <div><strong>Parent Navigation Item</strong></div> <div>The navigation item presents the first level of the navigation hierarchy. It must always have an icon. It can contain child items in which case the item shows an arrow indicator.</div> </div> <div> <div><strong>C</strong></div> <div><strong>Dropdown Container</strong></div> <div>This is a dropdown that holds the child items of the main item. Extends <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914869">Popover (Horizon)</a>.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Child Menu Item</strong></div> <div>These are the navigation items that belong to the main navigation items. Child items have no icons and can have children themselves. 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>Menu Navigation Item (Overflow)</strong></div> <div>This is the overflow visual representation of the navigation item. Identical to the navigation item in the vertical variant. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation%23VerticalNavigation-NavigationItem">Navigation Item</a> for full specifications.</div> </div> <div> <div><strong>F</strong></div> <div><strong>Overflow Button</strong></div> <div>This is a button that automatically appears when the navigation items exceed the available horizontal space.</div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>A</strong></div> <div><strong>Navigation Container</strong></div> <div>width: 100%;<br>height: 3.5rem;<br>padding: 0.75rem 1.5rem;<br>background: var(--sapShell_Navigation_Background);</div> </div> <div> <div><strong>A1</strong></div> <div><strong>Item Spacing</strong></div> <div>spacing: 0.75rem;</div> </div> <div> <div><strong>A2</strong></div> <div><strong>Spacer</strong></div> <div> <p>width: 100%;<br>height: 0.75rem;</p> <p>background: transparent;</p> </div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation Item</strong></div> <div> <p>width: auto;<br>height: 2rem;<br>padding: 0.5rem;<br>border-radius: var(--sapNavigation_BorderRadius);<br>transition: var(--sapNavigation_Transition);<br>color: var(--sapShell_Navigation_TextColor);</p> <p><strong>Normal State</strong><br>background: var(--sapList_Background);<br>border: 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);<br>border-bottom: var(--sapNavigation_Selected_Border);</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>B1</strong></div> <div><strong>Icon</strong></div> <div>width: 1rem;<br>height: 1rem;</div> </div> <div> <div><strong>B2</strong></div> <div><strong>Title</strong></div> <div> <p>width: auto; (the title takes all the available space)</p> <p>font-size: var(--sapFontSize);<br>font-weight: bold;text-overflow: ellipsis;</p> </div> </div> <div> <div><strong>B3</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Has Children Indicator</span></strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p><strong>Icon</strong><br>sap-icon://megamenu</p> </div> </div> <div> <div><strong>B4</strong></div> <div><strong>Spacing</strong></div> <div>spacing: 0.5rem;</div> </div> <div> <div><strong>B5</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></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation Item</strong></div> <div> <p>width: 100%;<br>height: 2rem;<br>padding: 0.1875rem 0 0.1875rem 0.5rem;<br>border-radius: var(--sapNavigation_BorderRadius);<br>transition: var(--sapNavigation_Transition);</p> <p><strong>Visual States</strong> No deltas</p> </div> </div> <div> <div><strong>B1</strong></div> <div><strong>Icon</strong></div> <div>No deltas</div> </div> <div> <div><strong>B2</strong></div> <div><strong>Title</strong></div> <div>No deltas</div> </div> <div> <div><strong>B3</strong></div> <div><strong><span style="color: rgb(34,53,72);text-decoration: none;">Nested Button</span></strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> (square) for full specifications</p> <p>margin: 0 0.0625rem;</p> </div> </div> <div> <div><strong>B4</strong></div> <div><strong>Spacing</strong></div> <div>No deltas</div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>C</strong></div> <div><strong>Popover Container</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BMenus">Navigation Menus</a> for full specifications.</p> <p>spacing: 0;</p> </div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>F</strong></div> <div><strong>Overflow Container</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> for full specifications.</div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>A</strong></div> <div><strong>Navigation Container</strong></div> <div>height: 4rem;</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation Item</strong></div> <div>height: 2.5rem; // content is vertically centered</div> </div> <div> <div><strong>C</strong></div> <div><strong>Popover Container</strong></div> <div>No deltas.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Child Item</strong></div> <div>height: 2.5rem;</div> </div> <div> <div><strong>E</strong></div> <div><strong>Navigation Item (Overflow)</strong></div> <div>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FVertical%2BNavigation%23VerticalNavigation-NavigationItem">Navigation Item</a> for full specifications.</div> </div> <div> <div><strong>F</strong></div> <div><strong>Overflow Button</strong></div> <div>height: 2.5rem; // content is vertically centered<br>width: 2.5rem; // content is horizontally centered</div> </div>

<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>D</strong></div> <div><strong>Child Item Indentation</strong></div> <div> <p><strong>Expanded Arrow Icon</strong><br>sap-icon://slim-arrow-right</p> <p><strong>Level 1 Indentation</strong><br>padding-left: 2rem;</p> <p><strong>Level 2 Indentation</strong><br>padding-left: 3rem;</p> <p><strong>Level 3 Indentation and beyond</strong><br>padding-left: 3.5rem;</p> </div> </div>