Components

Navigation

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

VerticalVertical › DefaultVertical › InverseVerticaldev ready

Preview

Code

<div class="slds-grid slds-grid--vertical slds-navigation-list--vertical">
  <h2 class="slds-text-title--caps slds-p-around--medium" id="entity-header">Reports</h2>
  <ul>
    <li class="slds-is-active"><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="entity-header">Recent</a></li>
    <li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="entity-header">Created by Me</a></li>
    <li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="entity-header">Private Reports</a></li>
    <li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="entity-header">Public Reports</a></li>
    <li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="entity-header">All Reports</a></li>
  </ul>
  <h2 class="slds-text-title--caps slds-p-around--medium" id="folder-header">Folders</h2>
  <ul>
    <li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="folder-header">Created by Me</a></li>
    <li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="folder-header">Shared with Me</a></li>
    <li><a href="javascript:void(0);" class="slds-navigation-list--vertical__action slds-text-link--reset" aria-describedby="folder-header">All Reports</a></li>
  </ul>
</div>

Component Overview

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to create different tabset looks.
Class NameUsage
.slds-navigation-list--vertical
Applied to:

<div>

Outcome:

Initializes Vertical Navigation

Required:

Required

Comments:

The default vertical navigation is meant to display on a white background

.slds-navigation-list--vertical-inverse
Applied to:

.slds-navigation-list--vertical

Outcome:

Inverses the interactions of the default vertical navigation list

Required:

No, optional element or modifier

Comments:

--

.slds-navigation-list--vertical__action
Applied to:

<a>

Outcome:

Hyperlink inside navigation's list items

Required:

Required

Comments:

--