Vertical Navigation generator
Settings screens, admin consoles and Experience Cloud sidebars use lightning-vertical-navigation. Style the active-item background and section label so the current location is always obvious.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-vertical-navigation selected-item={selectedItem} class="studio-vnav" onselect={handleSelect}>
<lightning-vertical-navigation-section label="Sales">
<lightning-vertical-navigation-item label="Dashboard" name="item1"></lightning-vertical-navigation-item>
<lightning-vertical-navigation-item label="Leads" name="item2"></lightning-vertical-navigation-item>
<lightning-vertical-navigation-item label="Opportunities" name="item3"></lightning-vertical-navigation-item>
<lightning-vertical-navigation-item label="Reports" name="item4"></lightning-vertical-navigation-item>
</lightning-vertical-navigation-section>
</lightning-vertical-navigation>
</template>Design tips for vertical navigations
- Keep the active-item highlight high-contrast — it is the primary wayfinding cue in a sidebar.
- Group more than 6–7 items under labeled sections rather than one long flat list.
- Keep item labels to one line; wrapped navigation labels break the vertical rhythm of the list.
Related components
Components developers commonly compare against or pair with Vertical Navigation.