<a href="/wiki/display/CPDesign/Vertical+Navigation">Vertical Navigation</a>
- Created by Milanov, Kalin, last modified on Mar 05, 2024
Table of Contents
Overview
Over the years, navigation became one of the signature design elements of BTP Tools. Traditionally BTP tools are monolithic products with complex information structures. Designing their navigation requires careful consideration and insists on flexibility.
FIORITECHP1-26797 - 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/patterns/generative-ai/vertical-navigation/media1_14c21ef8f3b98d1bcffe6d72e921475edb2276ca2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_14c21ef8f3b98d1bcffe6d72e921475edb2276ca2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_14c21ef8f3b98d1bcffe6d72e921475edb2276ca2.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/vertical-navigation/media%5C_14c21ef8f3b98d1bcffe6d72e921475edb2276ca2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/vertical-navigation/media_14c21ef8f3b98d1bcffe6d72e921475edb2276ca2.png?width=750&format=png&optimize=medium</a>" width="2880" height="1920"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/vertical-navigation/media1_19e687463ecf72c63dc20972fa6cb23bd62de611d.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_19e687463ecf72c63dc20972fa6cb23bd62de611d.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_19e687463ecf72c63dc20972fa6cb23bd62de611d.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/vertical-navigation/media%5C_19e687463ecf72c63dc20972fa6cb23bd62de611d.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/vertical-navigation/media_19e687463ecf72c63dc20972fa6cb23bd62de611d.png?width=750&format=png&optimize=medium</a>" width="2880" height="1920"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/vertical-navigation/media1_17fd98d957d8152c79fad7fddacab3117e56e63de.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_17fd98d957d8152c79fad7fddacab3117e56e63de.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_17fd98d957d8152c79fad7fddacab3117e56e63de.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/vertical-navigation/media%5C_17fd98d957d8152c79fad7fddacab3117e56e63de.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/vertical-navigation/media_17fd98d957d8152c79fad7fddacab3117e56e63de.png?width=750&format=png&optimize=medium</a>" width="2880" height="1920"> </picture> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/patterns/generative-ai/vertical-navigation/media1_18e331204c960dfbaee93c5a5e7cabab5b7d0fc32.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_18e331204c960dfbaee93c5a5e7cabab5b7d0fc32.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_18e331204c960dfbaee93c5a5e7cabab5b7d0fc32.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/vertical-navigation/media%5C_18e331204c960dfbaee93c5a5e7cabab5b7d0fc32.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/patterns/generative-ai/vertical-navigation/media_18e331204c960dfbaee93c5a5e7cabab5b7d0fc32.png?width=750&format=png&optimize=medium</a>" width="2880" height="1920"> </picture> </div> </div></p>
Anatomy
The table below details the areas and components that comprise Vertical Navigation. Check the Navigation Design Guidelines for information on interaction behavior and usage best practices.
<div> <div></div> <div>Element</div> <div>Usage</div> <div>Description</div> </div> <div> <div><strong>A</strong></div> <div><strong>Navigation Container</strong></div> <div>REQUIRED</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>REQUIRED</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>Separator</strong></div> <div></div> <div>A separator is a transparent object that creates space between navigation items or groups.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Group Navigation Item</strong></div> <div></div> <div>The group item is an expandable and collapsable container that holds navigation items. The arrow indicator of the group is visible on hover.</div> </div> <div> <div><strong>E</strong></div> <div><strong>Child Navigation Item</strong></div> <div></div> <div>These are the navigation items that belong to the main navigation items. Child items have no icons and cannot have children themselves.</div> </div> <div> <div><strong>F</strong></div> <div><strong>Spacer</strong></div> <div></div> <div>This is an invisible element that takes all available spaces and places navigation items at opposite ends. The size of the spacer is calculated dynamically.</div> </div> <div> <div><strong>G</strong></div> <div><strong>Divider</strong></div> <div></div> <div>Creates a visual divide between navigation items.</div> </div> <div> <div><strong>H</strong></div> <div><strong>Popover Container</strong></div> <div></div> <div>This is a popover that holds the child items of the main item when the vertical navigation is in snapped mode. Extends <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914869">Popover (Horizon)</a>.</div> </div> <div> <div><strong>I</strong></div> <div><strong>Popover Title</strong></div> <div></div> <div>This is the name of the navigation item when the popover container is active. See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTitle%2BBar">Title Bar</a> for full specifications.</div> </div> <div> <div><strong>J</strong></div> <div><strong>Dropdown Container</strong></div> <div></div> <div>This is the container that holds navigation items when an overflow is present in snapped mode. Extends <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2698914322">Menu (Horizon)</a></div> </div>
See also:
Navigation Interaction Specification
Desktop Specification
This is the leading design specification for the Vertical Navigation component.
Navigation Container
<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> <p>min-width: 16rem;<br>height: 100%;<br>padding: 1.5rem 0.75rem 0.75rem 0.75rem;<br>background: var(--sapList_Background);<br>box-shadow: var(--sapContainer_Shadow1);<br>border-radius: 0.5rem, 0.5rem 0 0;</p> <p><strong>When Snapped</strong><br>width: 3.5rem<br>border-radius: 0.5rem, 0.5rem 0 0;</p> <p><strong>When Popup</strong></p> <p>padding: 0.5rem;<br>height: auto;<br>box-shadow: var(--sapContainer_Shadow2);<br>border-radius: 0.5rem;</p> </div> </div> <div> <div><strong>A1</strong></div> <div><strong>Item Spacing</strong></div> <div>gap: 0.25rem;</div> </div>
Parent Navigation Item
Expanded Variant / Popup Variant
<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.5rem;<br>border-radius: var(--sapNavigation_BorderRadius);<br>transition: var(--sapNavigation_Transition);<br>color: var(--sapList_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);</p> <p><strong>Focused State</strong><br>background: var(--sapList_Background);<br>border: var(--sapContent_Transparent_Border);<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: 100%; (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>Selection Indicator</strong></div> <div> <p><strong>Appears in the selected state.</strong></p> <p>width: 0.5rem;<br>height: 0.5rem;</p> <p>sap-icon://circle-task-2<br>color: var(--sapList_SelectionBorderColor);<br>opacity: 1; (opacity:0 in all other states)</p> </div> </div> <div> <div><strong>B4</strong></div> <div><strong>Has Children Indicator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p><strong>Expanded Icon</strong><br>sap-icon://slim-arrow-down</p> <p><strong>Collapsed Icon</strong><br>sap-icon://slim-arrow-right</p> </div> </div> <div> <div><strong>B5</strong></div> <div><strong>Spacing</strong></div> <div>spacing: 0.4375rem;</div> </div> <div> <div><strong>B6</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>
Two-Click Areas Variant
Only deltas from the expanded variant are specified
<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;</p> <p>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>Selection Indicator</strong></div> <div>No deltas</div> </div> <div> <div><strong>B4</strong></div> <div><strong>Nested Button</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FNested%2BButton">Nested Button</a> (squared) for full specifications.</p> <p>margin: 0 0.0625rem;</p> </div> </div> <div> <div><strong>B5</strong></div> <div><strong>Spacing</strong></div> <div>No deltas</div> </div>
Snapped Variant
<div> <div></div> <div>Element</div> <div>Morning Horizon</div> </div> <div> <div><strong>B</strong></div> <div><strong>Navigation Item</strong></div> <div> <p>max-width: 2rem;<br>width: auto;<br>height: 2rem;<br>padding: 0.5rem;<br>border-radius: var(--sapNavigation_BorderRadius);<br>transition: var(--sapNavigation_Snapped_Transition);<br>color: var(--sapList_TextColor);<br>overflow: hidden;</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>max-width: 15rem;<br>background: var(--sapList_Hover_Background;<br>border: var(--sapContent_Transparent_Border)<br>box-shadow: var(–sapContainer_Shadow1);</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>max-width: 15rem;<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>font-size: var(--sapFontSize);<br>font-weight: bold;</p> <p>transition: opacity 0.3s;</p> <p><strong>Normal State, Active State, Selected State</strong><br>opacity: 0;</p> <p><strong>Hover State, Focused State</strong><br>opacity: 1;</p> </div> </div> <div> <div><strong>B3</strong></div> <div><strong>Selection Indicator</strong></div> <div> <p><strong>Appears as a border in the selected state.</strong></p> <p>border: solid 0.125rem color: var(--sapList_SelectionBorderColor);<br>opacity: 1; (opacity:0 in all other states)</p> </div> </div> <div> <div><strong>B4</strong></div> <div><strong>Has Children Indicator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p><strong>Collapsed Icon</strong><br>sap-icon://slim-arrow-right</p> </div> </div> <div> <div><strong>B5</strong></div> <div><strong>Spacing</strong></div> <div>gap: 0.5rem;</div> </div>
Separator
<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>C</strong></div> <div><strong>Separator</strong></div> <div> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p>background: transparent;</p> </div> </div>
Group Navigation Item
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>D</strong></div> <div><strong>Group Navigation Item</strong></div> <div> <p>width: 100%;<br>height: 2rem;<br>padding: 0.5rem;border-radius: var(--sapNavigation_BorderRadius);<br>transition: var(–sapNavigation_Transition);<br>color: var(--sapContent_LabelColor);</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>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)<br>vertical-alignment: center;</p> <p>font-size: var(--sapFontSmallSize);<br>font-weight: semibold;text-overflow: ellipsis;</p> </div> </div> <div> <div><strong>D2</strong></div> <div><strong>Has Children Indicator</strong></div> <div> <p><strong>Appears in hover, active, and focused states.</strong></p> <p>width: 0.75rem;<br>height: 0.75rem;</p> <p><strong>Expanded Icon</strong><br>sap-icon://slim-arrow-down</p> <p><strong>Collapsed Icon</strong><br>sap-icon://slim-arrow-right</p> </div> </div> <div> <div><strong>D3</strong></div> <div><strong>Spacing</strong></div> <div>gap: 0.4375rem;</div> </div>
Child Navigation Item
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>E</strong></div> <div><strong>Child Item</strong></div> <div> <p>width: 100%;<br>height: 2rem;<br>border-radius: 0.375rem;</p> <p>transition: background-color 0.3s ease-in-out;</p> <p><strong>Vertical Variant Padding</strong><br>padding: 0.5rem 0.5rem 0.5rem 2rem;</p> <p><strong>In Popup Padding</strong><br>padding: 0.5rem;</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>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>E1</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>E2</strong></div> <div><strong>Selection Indicator</strong></div> <div> <p><strong>Appears in the selected state.</strong></p> <p>width: 0.5rem;<br>height: 0.5rem;</p> <p>sap-icon://circle-task-2<br>color: var(--sapList_SelectionBorderColor);<br>opacity: 1; (opacity:0 in all other states)</p> </div> </div> <div> <div><strong>E3</strong></div> <div><strong>Spacing</strong></div> <div>gap: 0.5rem;</div> </div> <div> <div><strong>E4</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>
Spacer
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>F</strong></div> <div><strong>Spacer</strong></div> <div> <p>width: 0.75rem;<br>height: 100%;</p> <p>background: transparent;</p> </div> </div>
Divider
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>G</strong></div> <div><strong>Divider</strong></div> <div> <p>width: 100%;<br>height: auto;<br>padding: 0.3125rem;</p> <p>background: transparent;</p> <p><strong>Divider Line</strong><br>height: 0.0625rem;<br>border-radius: 0.125rem;<br>background: var(----sapToolbar_SeparatorColor);</p> </div> </div>
Popover Container and Title
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>H</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>min-width: 16rem;<br>height: auto;</p> <p>gap: 0;</p> </div> </div> <div> <div><strong>I</strong></div> <div><strong>Popover Title</strong></div> <div> <p>See <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fdisplay%2FCPDesign%2FTitle%2BBar">Title Bar</a> for full specifications.</p> <p>margin-bottom: 0.75rem;</p> </div> </div>
Dropdown Container
<div> <div></div> <div>Element</div> <div>All Horizon Themes</div> </div> <div> <div><strong>J</strong></div> <div><strong>Overflow 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><strong>Overflow Button</strong><br>Use Parent Navigation Item in Snapped Variant.</p> </div> </div>
Tablet Specification
Tablet specification depicts only deltas from the desktop specification.
<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> <p>The navigation container automatically snaps on tablets. // device type AND breakpoint <1024px</p> <p>width: 3.5rem;<br>height: 100%;<br>padding: 0.5rem;<br>spacing: 0.125rem;<br>border-radius: 0.5rem;</p> <p><strong>When In Popup</strong> padding: 0.75rem;<br>height: auto;<br>box-shadow: var(--sapNavigation_Shadow2);</p> </div> </div> <div> <div><strong>B</strong></div> <div><strong>Parent Navigation Item</strong></div> <div> <p>height: 2.5rem; // content is vertically centered</p> <p><strong>When Snapped</strong><br>width: 2.5rem;<br>height: 2.5rem;</p> <p><strong>Title // not visible in snapped variant in any of the states</strong><br>opacity: 0;</p> </div> </div> <div> <div><strong>C</strong></div> <div><strong>Separator</strong></div> <div>No deltas.</div> </div> <div> <div><strong>D</strong></div> <div><strong>Group Navigation Item</strong></div> <div>height: 2.5rem; // only in popup variant</div> </div> <div> <div><strong>E</strong></div> <div><strong>Child Navigation Item</strong></div> <div>height: 2.5rem;</div> </div> <div> <div><strong>F</strong></div> <div><strong>Spacer</strong></div> <div>No deltas. // only available in snapped variant</div> </div> <div> <div><strong>G</strong></div> <div><strong>Divider</strong></div> <div>No deltas.</div> </div> <div> <div><strong>H</strong></div> <div><strong>Popover Container</strong></div> <div>No deltas.</div> </div> <div> <div><strong>I</strong></div> <div><strong>Popover Title</strong></div> <div>No deltas.</div> </div> <div> <div><strong>J</strong></div> <div><strong>Dropdown Container</strong></div> <div>No deltas.</div> </div>
Phone Specification
Phone specification depicts only deltas from the tablet specification.
<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> <p>The navigation container is only available in Popup mode.</p> <p>padding: 0.75rem 1rem;<br>spacing: 0.125rem;<br>width: 100%;<br>border-radius: 0.5rem;</p> </div> </div> <div> <div><strong>B</strong></div> <div><strong>Parent Navigation Item</strong></div> <div>No deltas. // use Popup variant specs</div> </div> <div> <div><strong>C</strong></div> <div><strong>Separator</strong></div> <div>No deltas</div> </div> <div> <div><strong>D</strong></div> <div><strong>Group Navigation Item</strong></div> <div>No deltas. // use Popup variant specs</div> </div> <div> <div><strong>E</strong></div> <div><strong>Child Navigation Item</strong></div> <div>No deltas. // use Popup variant specs</div> </div> <div> <div><strong>F</strong></div> <div><strong>Spacer</strong></div> <div>Not present on phones.</div> </div> <div> <div><strong>G</strong></div> <div><strong>Divider</strong></div> <div>No deltas. // use Popup variant specs</div> </div> <div> <div><strong>H</strong></div> <div><strong>Popover Container</strong></div> <div>Not present on phones.</div> </div> <div> <div><strong>I</strong></div> <div><strong>Popover Title</strong></div> <div>Not present on phones.</div> </div> <div> <div><strong>J</strong></div> <div><strong>Dropdown Container</strong></div> <div>Not present on phones.</div> </div>