vertical-navigation

Navigation represents a list of links that either take the user to another page or parts of the page the user is in.

List

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">

Accessibility Note
The aria-current attribute is used when an element within a set (e.g., navigation list items) is styled to indicate the selected or active item. In our use case, the attribute should be placed on the slds-nav-vertical__action link element. In our example above, we're using the generic true value, but the attribute will accept a variety of options depending on your use case.
For more information on aria-current, please visit the W3C specification page.

States

Collapsed

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">

Expanded

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">

Examples

Compact

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical slds-nav-vertical_compact" aria-label="Sub page">
    <div class="slds-nav-vertical__section">

Items with Icons

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">

Items with Notifications

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">

Shaded Background

<div class="demo-only" style="width:320px;background-color:#FAFAFB">
  <nav class="slds-nav-vertical slds-nav-vertical_shade" aria-label="Sub page">
    <div class="slds-nav-vertical__section">

Quickfind

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-form-element slds-p-horizontal_large">

Radio Group

The radio group variant should be used when your vertical navigation acts as a selection or filter on content, like within a modal. If the vertical navigation takes the user to another page or part of a page, use the standard List version. If your content changes entirely whenever options in the navigation are selected, instead of filtering one master list, then use the Vertical Tabs component.

<div class="slds-nav-vertical__section">
  <div>
    <fieldset class="slds-nav-vertical">

Examples

Compact

<div class="slds-nav-vertical__section">
  <div>
    <fieldset class="slds-nav-vertical slds-nav-vertical_compact">

Shaded Background

<div class="demo-only" style="background-color:#FAFAFB">
  <div class="slds-nav-vertical__section">
    <div>