Component Blueprints

Vertical Navigation

Lightning Component
  • HTML/CSS:Dev Ready
  • Web Component:In Progress (1 of 2 variants)
  • Layout:Responsive

Sections

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">
      <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>

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">
      <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>

Expanded#

<div class="demo-only" style="width:320px">
  <nav class="slds-nav-vertical" aria-label="Sub page">
    <div class="slds-nav-vertical__section">
      <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>

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">
      <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>

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">
      <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>

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">
      <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>

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">
      <h2 id="entity-header" class="slds-nav-vertical__title">Reports</h2>

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">
      <label class="slds-form-element__label slds-assistive-text" for="input-id-01">Filter navigation items</label>

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.

Reports
<div class="slds-nav-vertical__section">
  <div>
    <fieldset class="slds-nav-vertical">
      <legend class="slds-nav-vertical__title">Reports</legend>

Examples#

Compact#

Reports
<div class="slds-nav-vertical__section">
  <div>
    <fieldset class="slds-nav-vertical slds-nav-vertical_compact">
      <legend class="slds-nav-vertical__title">Reports</legend>

Shaded Background#

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

Overview of CSS Classes#

Selector.slds-nav-vertical
Summary
Supportdev-ready
Restrictnav, fieldset
VariantTrue
Selector.slds-nav-vertical_compact
Summary

Modifer to reduce spacing between navigation items

Restrict.slds-nav-vertical
ModifierTrue
Selector.slds-nav-vertical_shade
Summary

Modifier to adjust list item when vertical navigation is sitting on top of a shaded background

Restrict.slds-nav-vertical
ModifierTrue
Selector.slds-nav-vertical__title
Summary

Section title of the vertical navigation

Restrict.slds-nav-vertical h2, .slds-nav-vertical legend
Selector.slds-nav-vertical__item
Summary

List of the vertical navigation

Restrict.slds-nav-vertical li, .slds-nav-vertical span
Selector.slds-is-active
Summary

Active state of a list item within a vertical navigation

Restrict.slds-nav-vertical__item
ModifierTrue
Selector.slds-nav-vertical__action
Summary

Actionable element inside of vertical navigation list item

Restrict.slds-nav-vertical a, .slds-nav-vertical button, .slds-nav-vertical label
Selector.slds-nav-vertical__action_overflow
Summary

Actionable element that toggles visibility of overflown list items

Restrict.slds-nav-vertical__action
Selector.slds-nav-vertical__action-text
Summary

Text inside of actionable element that toggles visibility of overflown list items

Restrict.slds-nav-vertical__action_overflow span
Selector.slds-nav-vertical_radio-faux
Summary

Used for styling the radio button

Restrict.slds-nav-vertical__action span
Selector.slds-nav-vertical__item [type="radio"]
Summary

Version of vertical nav that uses radio buttons

Supportdev-ready
Restrict.slds-nav-vertical
VariantTrue

Vertical Navigation Release Notes

2.15.8

Changed

  • Replaced checked radio group navigation item background token with BRAND_BACKGROUND_PRIMARY branding token.

2.10.0

Added

  • Added right-to-left specific selector to slds-nav-vertical__action_overflow slds-button__icon to allow the icon to rotate in the proper direction in right-to-left languages.
  • Added right-to-left specific selector to slds-nav-vertical__action to place the box-shadow in the correct location in right-to-left languages.

2.9.0

Changed

  • Replaced active navigation item background token with BRAND_PRIMARY_TRANSPARENT_10 branding token.

2.8.0

Changed

  • Increased font size to 16px and applied bold font weight to slds-nav-vertical__title.
  • Increased left padding in slds-nav-vertical__action.
  • Changed background color of the selected slds-nav-vertical__item element in the shaded background example to be white.
  • Moved the aria-describedby attribute from the individual navigation <a /> links to the list <ul>.

Removed

  • Removed slds-text-title_caps from vertical navigation titles.