<a href="/wiki/pages/viewpage.action?pageId=2075534845">Vertical Navigation (aka: Side Navigation control) (Quartz)</a>
- Created by Werner, Olga, last modified by Milanov, Kalin on Nov 16, 2022
Table of Contents
Kalin Milanov
Design contact
Introduction
The Vertical Navigation consists technically of the Side Navigation control (sap.tnt.SideNavigation).
It can be used as an alternative to the Horizontal Navigation.
This navigation type is composed by two distinct item levels:
- First Level items → Always visible, can be either navigable in and of themselves or be a container for Second Level items (it should not be both)
- Second Level items → Are always contained by a First Level item, and can have their visibility toggled by this First Level item. They are always only navigable
For further details on use, please check the corresponding Design Pattern guideline page.
Visual States
The Side Navigation has three visual states, which can be triggered via the Menu Button (the icon with three lines seen in images below) in the Tool Header:
- Expanded (everything is visible: Icons and/or Text)
- Condensed (only Icons are shown - condensed mode is not supported on text-only cases)
- Off-screen (Side Navigation is completely off-screen)
<p><div> <div> <h5 id="expanded"><em>Expanded</em></h5> </div> <div> <h5 id="condensed"><em>Condensed</em></h5> </div> <div> <h5 id="off-screen"><em>Off-screen</em></h5> </div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1e4232bd2c133fa1720895cc60f376c91de1e5525.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e4232bd2c133fa1720895cc60f376c91de1e5525.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e4232bd2c133fa1720895cc60f376c91de1e5525.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1e4232bd2c133fa1720895cc60f376c91de1e5525.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1e4232bd2c133fa1720895cc60f376c91de1e5525.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> </div> <div> <p> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1d76dab667e219fad6d569cbd8eab6e94489dab04.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1d76dab667e219fad6d569cbd8eab6e94489dab04.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1d76dab667e219fad6d569cbd8eab6e94489dab04.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1d76dab667e219fad6d569cbd8eab6e94489dab04.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1d76dab667e219fad6d569cbd8eab6e94489dab04.png?width=750&format=png&optimize=medium</a>" width="152" height="755"> </picture> </p> <p>While technically possible, this use-case is not recommended by the Design System guidelines. For more details, please check the <a href="https%3A%2F%2Fsap.frontify.com%2Fdocument%2F222580%23%2Fproduct%2Fvertical-navigation">corresponding usage spec page</a>.</p> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_173ccd65e62e4e4ada7f49610c7495550458036a1.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_173ccd65e62e4e4ada7f49610c7495550458036a1.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_173ccd65e62e4e4ada7f49610c7495550458036a1.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_173ccd65e62e4e4ada7f49610c7495550458036a1.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_173ccd65e62e4e4ada7f49610c7495550458036a1.png?width=750&format=png&optimize=medium</a>" width="152" height="755"> </picture> </div> </div></p>
Visual State use-cases
The different visual states can be combined in two different pairs, thus making use of the Menu Button as a toggle switch between them:
- Expanded & Off-screen → The recommended combination by the Design Guidelines.
- Expanded & Condensed → Use of the Vertical Navigation in condensed mode is not advised. Consider using the Horizontal navigation is visual permanence is needed.
<p><div> <div> <h5 id="desktop--tablet"><em>Desktop & Tablet</em></h5> </div> <div> <h5 id="phone"><em>Phone</em></h5> </div> </div> <div> <div> <p>Default:</p> <p> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/tool-page-quartz/media1_1e5406168297ddbc428ff57a1e4dbedad27809ad0.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e5406168297ddbc428ff57a1e4dbedad27809ad0.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e5406168297ddbc428ff57a1e4dbedad27809ad0.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1e5406168297ddbc428ff57a1e4dbedad27809ad0.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1e5406168297ddbc428ff57a1e4dbedad27809ad0.png?width=750&format=png&optimize=medium</a>" width="1099" height="735"> </picture> </p> <p>On Menu Button click:</p> <p> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_175b0b6d13a45786237f75cda79c177618e76f0c7.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_175b0b6d13a45786237f75cda79c177618e76f0c7.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_175b0b6d13a45786237f75cda79c177618e76f0c7.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_175b0b6d13a45786237f75cda79c177618e76f0c7.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_175b0b6d13a45786237f75cda79c177618e76f0c7.png?width=750&format=png&optimize=medium</a>" width="1099" height="735"> </picture> </p> </div> <div> <p>Default:</p> <p> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1347eee954a1316f64e23db28b6493f261351555e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1347eee954a1316f64e23db28b6493f261351555e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1347eee954a1316f64e23db28b6493f261351555e.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1347eee954a1316f64e23db28b6493f261351555e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1347eee954a1316f64e23db28b6493f261351555e.png?width=750&format=png&optimize=medium</a>" width="540" height="735"> </picture> </p> <p>On Menu Button tap:</p> <p> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_10642f2ef2df7beeb390a0cf41d972f1078899dda.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_10642f2ef2df7beeb390a0cf41d972f1078899dda.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_10642f2ef2df7beeb390a0cf41d972f1078899dda.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_10642f2ef2df7beeb390a0cf41d972f1078899dda.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_10642f2ef2df7beeb390a0cf41d972f1078899dda.png?width=750&format=png&optimize=medium</a>" width="540" height="735"> </picture> </p> </div> </div> <div> <div> <p>The default visual state for desktop on opening application is <strong>expanded</strong>.</p> <p>Clicking the Menu Button would then switch to the "off-screen" visual state.</p> <p>In desktop, the Vertical Navigation <strong>pushes the content</strong> to the right when in the <u>expanded</u> state, and <strong>pulls the content</strong> to the left when it goes into <u>off-screen</u> state (when the Menu Button is clicked a second time).</p> </div> <div> <p>The default visual state for mobile on opening application is <strong>off-screen</strong>.</p> <p>Clicking the Menu Button would then switch to the "expanded" visual state.</p> <p>In mobile, the Vertical Navigation <strong>overlays the content</strong> to the right when in the <u>expanded</u> state, and <strong>goes away to the left without affecting the content when:</strong></p> <ul> <li>Menu Button is tapped a second time</li> <li>An item is navigated to</li> <li>Touch event outside the Vertical Navigation</li> </ul> <p>Please check the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2033847432">Dialog (Fiori 3)</a> specification for details on the overlay (darkened background).</p> </div> </div></p>
Specifications
Expanded State
<p><div> <div>Hidden Second Level Items</div> <div>Label</div> <div>Description</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCW & HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_16db12a57654cf8812a828a479dc398d85a742838.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_16db12a57654cf8812a828a479dc398d85a742838.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_16db12a57654cf8812a828a479dc398d85a742838.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_16db12a57654cf8812a828a479dc398d85a742838.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_16db12a57654cf8812a828a479dc398d85a742838.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> </div> </div> <div> <div><strong>A</strong></div> <div>Side Navigation container background</div> <div> <p><strong>Height:</strong> 100%<strong>Width:</strong> same as the Navigation List Item</p> <p><strong>Background Design:</strong> Solid<br><strong>Color:</strong> --sapList_AlternatingBackground</p> <p><strong>Shadow:</strong> --sapContent_Shadow0</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>B</strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">First Level Item<br>(navigable)</a></div> <div> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> <p>A click/tap event on this item navigates to content.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>C</strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">First Level Item<br>(container)</a></div> <div> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> <p>A click/tap event on this item toggles the Second Level Items' visibility (see "<strong>E</strong>" and "<strong>F</strong>").</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>D1</strong></div> <div>Arrow: Closed State</div> <div> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> <p>This arrow indicates the First Level item is a container to (currently hidden) Second Level items.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div></p>
<p><div> <div>Visible Second Level Items</div> <div>Label</div> <div>Description</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCW & HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_183fe697b4b6b76a5a525500fe3e5cae2109465f4.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_183fe697b4b6b76a5a525500fe3e5cae2109465f4.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_183fe697b4b6b76a5a525500fe3e5cae2109465f4.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_183fe697b4b6b76a5a525500fe3e5cae2109465f4.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_183fe697b4b6b76a5a525500fe3e5cae2109465f4.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> </div> </div> <div> <div> <h4 id="c1">C1</h4> </div> <div>First Level Item<br>(container)</div> <div> <p>Please note that the "Drawer" ("G") effectively "trims" the First Level item's left and right edges, therefore items within it (text, icons, etc.) maintain their relative position.</p> <p>The "cut" part on the left & right corresponds to the margins from the "Drawer" ("G"), or: 0,25 rem (equivalent to 4 px)</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>D2</strong></div> <div>Arrow: Open State</div> <div> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> <p>This arrow indicates that the First Level item is a container for the currently visible Second Level Items.</p> <p>Please note that the Second Level items' container effectively "trims" the Navigation List item, therefore items within it (text, icons) maintain their relative position.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>E</strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Second Level Item</a></div> <div> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> <p>A Second Level item can <strong>ONLY</strong> be navigable (i.e. there are no third level items)</p> <p>Please note that the "Drawer" ("G") effectively "trims" the Second Level item, therefore items within it maintain their relative position.</p> <p>The "cut" part on the left & right corresponds to the margins from the "Drawer" ("G"), or: 0,25 rem (equivalent to 4 px)</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div></p>
<p><div> <div>Second Level items' Container</div> <div>Label</div> <div>Description</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCW & HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1b3add8f289045a9c3ded6139e68e59ec836cd017.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1b3add8f289045a9c3ded6139e68e59ec836cd017.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1b3add8f289045a9c3ded6139e68e59ec836cd017.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1b3add8f289045a9c3ded6139e68e59ec836cd017.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1b3add8f289045a9c3ded6139e68e59ec836cd017.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_197c519e1144484125f42359a15c6299644868dc5.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_197c519e1144484125f42359a15c6299644868dc5.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_197c519e1144484125f42359a15c6299644868dc5.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_197c519e1144484125f42359a15c6299644868dc5.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_197c519e1144484125f42359a15c6299644868dc5.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_117871ec29d4f0a354208a07af028917f7e08d618.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_117871ec29d4f0a354208a07af028917f7e08d618.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_117871ec29d4f0a354208a07af028917f7e08d618.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_117871ec29d4f0a354208a07af028917f7e08d618.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_117871ec29d4f0a354208a07af028917f7e08d618.png?width=750&format=png&optimize=medium</a>" width="736" height="755"> </picture> </div> </div> <div> <div><strong>F</strong></div> <div>"Drawer"</div> <div> <p>This item visually follows the <strong>container</strong> from the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2Fvisualcore%2FCard%2B%2528Fiori%2B3%2529%2B-%2BCard%2BAnatomy">Card Anatomy spec</a>, with the following changes:</p> <p><strong>Background:</strong> transparent<br><strong>Width:</strong> 14.375 rem (equivalent to 230 px)</p> <p>The "Drawer" will wrap around the opened First Level Item and all its respective Second Level Items, highlighting it as a group.</p> <p>The Navigation List Items (First & Second Levels) <strong>remain the same size, having their edges effectively "cut" by the Card borders.</strong></p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>G</strong></div> <div>Margins</div> <div> <p>The Second Level items' Container has a visual margin of 0,25 rem (equivalent to 4 px) to both sides and its top.</p> <p>The top padding allows multiple containers to be opened in succession yet still be visibly distinct groups.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div> <h4 id="2">1 & 2</h4> </div> <div>Expanding / Collapsing</div> <div> <p>When a First Level Item (container) is clicked, two different actions occur <strong>simultaneously</strong>:</p> <ol> <li>The Second Level items' Container's top padding (I) is added</li> <li>The container expands downwards exposing the Second Level items (F) themselves</li> </ol> <p>Collapsing the First Level Item (container) results in the reverse action.</p> <p>This effect should be smooth, to hide the 0,25 rem "jump" of the First Level item (moving downwards due to the addition of the top margin).</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div></p>
<p><div> <div>Text-only expanded state</div> <div>Label</div> <div>Description</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCW & HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_133f1aa6a252ceea6199fc3e6d8a80d3e8d7a2bb2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_133f1aa6a252ceea6199fc3e6d8a80d3e8d7a2bb2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_133f1aa6a252ceea6199fc3e6d8a80d3e8d7a2bb2.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_133f1aa6a252ceea6199fc3e6d8a80d3e8d7a2bb2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_133f1aa6a252ceea6199fc3e6d8a80d3e8d7a2bb2.png?width=750&format=png&optimize=medium</a>" width="347" height="748"> </picture> </div> </div> <div> <div><strong>H</strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item</a>'s<br>left/right paddings</div> <div> <p>When the First Level Items have no icons, the "Icon Container" is also removed.</p> <p>The total left padding is then 1 rem: 0.5 rem from the List Item and 0.5 rem from the text left padding. The right padding remains unaltered.</p> <p>For details please check the Navigation List Item (Quartz) spec.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>I</strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem%23NavigationListItem-SecondLevelItems">Second Level Item</a> indentation</div> <div> <p>Second Level Items, on the other hand, remain unchanged.</p> <p>Their "Icon container" is maintained in order to retain the visual indentation and visual hierarchy.</p> <p>For details please check the Navigation List Item (Quartz) spec.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div> <p>While technically possible, this use-case is not recommended by the Design System guidelines. For more details, please check the <a href="https%3A%2F%2Fbtpx.frontify.com%2Fdocument%2F222663%23%2Fproduct-shell%2Fvertical-navigation%2Fwhen-to-use">corresponding usage spec page</a>.</p> <p>Most importantly, <strong>do not create a mixed-case use, where some First Level items have icons and some don't.</strong></p> <p>Also note that there is <strong>no corresponding Condensed state</strong> for text-only Vertical Navigation.</p> </div> </div></p>
Condensed State
<p><div> <div>Hidden Second Level Items</div> <div>Label</div> <div>Description</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCW & HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1609cf08abbda509c6f23573f0d5d1ebfc7319dc9.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1609cf08abbda509c6f23573f0d5d1ebfc7319dc9.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1609cf08abbda509c6f23573f0d5d1ebfc7319dc9.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1609cf08abbda509c6f23573f0d5d1ebfc7319dc9.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1609cf08abbda509c6f23573f0d5d1ebfc7319dc9.png?width=750&format=png&optimize=medium</a>" width="152" height="755"> </picture> </div> </div> <div> <div><strong>J</strong></div> <div> <p>First Level Item<br>(navigable)</p> <p>-</p> <p>Condensed State</p> </div> <div> <p>For details, please refer to the Navigation List Item spec.</p> <p>A click/tap event on this item navigates to content.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>K</strong></div> <div> <p>First Level Item<br>(container)</p> <p>-</p> <p>Condensed State</p> </div> <div> <p>For details, please refer to the Navigation List Item spec.</p> <p>A click/tap event on this item toggles the Second Level Items' visibility (via the Popover control).</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div></p>
<p><div> <div>Visible Second Level Items</div> <div>Label</div> <div>Description</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCW & HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1962f0f37e3eacbfa1c423e4cacc09823d7492905.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1962f0f37e3eacbfa1c423e4cacc09823d7492905.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1962f0f37e3eacbfa1c423e4cacc09823d7492905.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1962f0f37e3eacbfa1c423e4cacc09823d7492905.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1962f0f37e3eacbfa1c423e4cacc09823d7492905.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_127573104114497bc176b6f1889fda56747a8f7a2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_127573104114497bc176b6f1889fda56747a8f7a2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_127573104114497bc176b6f1889fda56747a8f7a2.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_127573104114497bc176b6f1889fda56747a8f7a2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_127573104114497bc176b6f1889fda56747a8f7a2.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> </div> </div> <div> <div> <h4 id="l">L</h4> </div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2033132412">Popover</a></div> <div> <p>This Popover's design is dimensionally equivalent to the Second Level Items' container ("F"):</p> <p><strong>Width:</strong> 14.375 rem (equivalent to 230 px)<strong>Margin:</strong> the only margin kept is the left margin of 0,25 rem (equivalent to 4 px) - ("G")</p> <p>Otherwise, the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2033132412">Popover</a> control design is followed, with the distinction:</p> <p><strong>Indentation:</strong> There is an indentation of 3 rem (equivalent to 48 px) - ("L1") to the left of the Second Level items</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>M</strong></div> <div> <p>First Level Item<br>(container)</p> <p>-</p> <p>Within Popover</p> </div> <div> <p>The left and right of the First Level item are "cut off", to maintain its relative size to the rest of the control, similarly to "C1"</p> <p>Note that a First Level item within the Popover does not have an arrow (D1, D2) associated to it.</p> <p>The First Level item is displayed in the Popover's Header, which gives it a bottom "visual separation border" to the Second Level items.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div> <div> <div><strong>N</strong></div> <div> <p>Second Level item</p> <p>-</p> <p>Within Popover</p> </div> <div> <p>In this specific case, due to the much larger ("L1") area to the left, the Second Level item is <strong>NOT</strong> trimmed on the left, only on the right (similarly to "E" on the right).</p> <p>The item follows otherwise the <a href="https%3A%2F%2Fwww.sap.com%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2364880507">Navigation List Item (Quartz)</a> spec, with the following change:</p> <p>In this specific case, the "Icon Container" is removed from the Second Level item, as the indentation ("L1") accounts for the visual hierarchy.This will result in a total left padding of 1 rem: 0.5 rem from the List Item and 0.5 rem from the text left padding ("N1").The List Item right padding remains unaltered and is "trimmed" by the Popover.</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div></p>
Grouping
The Vertical Navigation items can be further visually grouped using the Group Header List Item.
<p><div> <div>Group Header</div> <div>Label</div> <div>Description</div> <div>Quartz Light</div> <div>Quartz Dark</div> <div>HCW & HCW</div> </div> <div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1df8776c54badd1315be701373820e702579e9be2.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1df8776c54badd1315be701373820e702579e9be2.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1df8776c54badd1315be701373820e702579e9be2.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1df8776c54badd1315be701373820e702579e9be2.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1df8776c54badd1315be701373820e702579e9be2.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> </div> </div> <div> <div><strong>O</strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2Fvisualcore%2FList%2B%2528Fiori%2B3%2529%2B-%2BGroup%2BHeader">Group Header List Item</a></div> <div> <p>Follow the Group Header's specs, with the following changes:</p> <p><strong>Background Color:</strong> --sapList_AlternatingBackground</p> </div> <div>No Deltas</div> <div>No Deltas</div> </div></p>
Navigation Indication
All the possible combinations of navigation indication are visualized below. For further details on the VD of the list items themselves, please refer to this spec.
It is important to notice that whenever a navigated Second Level item is hidden, its First Level container item shows only the navigation indication bar (the text and icon colors do not change)
First Level Item is navigated
<p><div> <div></div> <div>Expanded Mode</div> <div></div> <div>Condensed Mode</div> <div></div> </div> <div> <div><strong><br></strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1bec9632ff36b052044a998ed459014a9a9ba4263.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bec9632ff36b052044a998ed459014a9a9ba4263.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bec9632ff36b052044a998ed459014a9a9ba4263.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1bec9632ff36b052044a998ed459014a9a9ba4263.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1bec9632ff36b052044a998ed459014a9a9ba4263.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> </div> <div></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1e5c3474eb8fc6927d98fdebf5834e8f7cf521d7e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1e5c3474eb8fc6927d98fdebf5834e8f7cf521d7e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1e5c3474eb8fc6927d98fdebf5834e8f7cf521d7e.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1e5c3474eb8fc6927d98fdebf5834e8f7cf521d7e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1e5c3474eb8fc6927d98fdebf5834e8f7cf521d7e.png?width=750&format=png&optimize=medium</a>" width="152" height="755"> </picture> </div> <div></div> </div> <div> <div><strong><br></strong></div> <div> <p>When a navigable First Level item is navigated, it shows the Navigation Indication Bar to the right-side of the Navigation List Item, and both the Icon as well as the Text change color to indicate the navigation.</p> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> </div> <div></div> <div> <p>When a navigable First Level item is navigated, it shows the Navigation Indication Bar to the right-side of the Navigation List Item, and the Icon changes color to indicate the navigation.</p> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> </div> <div></div> </div> <div> <div><strong><br></strong></div> <div></div> <div></div> <div></div> <div></div> </div></p>
Second Level Item is navigated
<p><div> <div></div> <div>Visible Second Level items</div> <div></div> <div>Hidden Second Level items</div> <div></div> </div> <div> <div><strong><br></strong></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_172837d568658b0f30d4d4a35759ea8aa4fcc46f1.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_172837d568658b0f30d4d4a35759ea8aa4fcc46f1.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_172837d568658b0f30d4d4a35759ea8aa4fcc46f1.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_172837d568658b0f30d4d4a35759ea8aa4fcc46f1.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_172837d568658b0f30d4d4a35759ea8aa4fcc46f1.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_131bc158267b9bf74843e99ec0500da719254ec0e.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_131bc158267b9bf74843e99ec0500da719254ec0e.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_131bc158267b9bf74843e99ec0500da719254ec0e.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_131bc158267b9bf74843e99ec0500da719254ec0e.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_131bc158267b9bf74843e99ec0500da719254ec0e.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> </div> <div></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_172a493c956d3258b7b5a395e3ec74ee514576b14.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_172a493c956d3258b7b5a395e3ec74ee514576b14.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_172a493c956d3258b7b5a395e3ec74ee514576b14.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_172a493c956d3258b7b5a395e3ec74ee514576b14.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_172a493c956d3258b7b5a395e3ec74ee514576b14.png?width=750&format=png&optimize=medium</a>" width="348" height="755"> </picture> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media1_1ace0a08fe6c188502e6bc4d0cfc932567d6a756b.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1ace0a08fe6c188502e6bc4d0cfc932567d6a756b.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1ace0a08fe6c188502e6bc4d0cfc932567d6a756b.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/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media%5C_1ace0a08fe6c188502e6bc4d0cfc932567d6a756b.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/btp/archive/fiori-3-quartz/components/vertical-navigation-aka-side-navigation-control-quartz/media_1ace0a08fe6c188502e6bc4d0cfc932567d6a756b.png?width=750&format=png&optimize=medium</a>" width="152" height="755"> </picture> </div> <div></div> </div> <div> <div><strong><br></strong></div> <div> <p>Visible navigated Second Level items behave similarly to the navigated First Level items:<br>They show a Navigation Indication bar and the Text changes color to indicate navigation.</p> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> </div> <div></div> <div> <p>Whenever a navigated Second Level item is hidden, its respective First Level item displays the navigation indication bar instead. In this case, though. this First Level item's <strong>Icon and Text will maintains their original color.</strong></p> <p>For details, please refer to the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2FCPDesign%2FNavigation%2BList%2BItem">Navigation List Item spec</a>.</p> </div> <div></div> </div> <div> <div><strong><br></strong></div> <div></div> <div></div> <div></div> <div></div> </div></p>
