Go to homepage

Projects /

Side Navigation v4

A vertical, side navigation for dashboard and content management systems.

View Demo

Dependencies

How to

The Side Navigation v4 component is a main, side navigation. It's ideal for dashboards or content management systems.

The responsiveness is handled by the Responsive Sidebar component.

Add the .sidenav-v4__item--current class to the list item that should be expanded (the one containing the current link), and aria-current="page" to the current link (the page you're on):

<nav class="sidenav-v4 js-sidenav-v4">
  <ul>
    <li class="sidenav-v4__item">
      <a class="sidenav-v4__link js-sidenav-v4__link" href="#0">Overview</a>

      <ul class="sidenav-v4__sub-list">
        <li><a class="sidenav-v4__sub-link" href="#0">All Data</a></li>
        
        <!-- ... -->
      </ul>
    </li>

    <li class="sidenav-v4__item sidenav-v4__item--current"> <!-- 👈 -->
      <a class="sidenav-v4__link js-sidenav-v4__link" href="#0">Notifications</a>

      <ul class="sidenav-v4__sub-list">
        <li>
          <a class="sidenav-v4__sub-link" href="#0" aria-current="page">All Notifications</a> <!-- 👈 -->
        </li>
        
        <!-- ... -->
      </ul>
    </li>
  </ul>
</nav>

Important: On mobile, if a list item contains a sublist we replace the main link with a button that controls the sublist visibility. The button, created in JS, has the same link content and a .sidenav-v4__link--btn class.

<nav class="sidenav-v4 js-sidenav-v4">
  <ul>
    <li class="sidenav-v4__item">
      <!--👇 this link is replaced by a button on mobile -->
      <a class="sidenav-v4__link js-sidenav-v4__link" href="#0"> 
        <svg class="sidenav-v4__icon icon" viewBox="0 0 20 20">
          <!-- ... -->
        </svg>

        <span>Overview</span>

        <svg class="sidenav-v4__arrow-icon icon margin-left-auto" viewBox="0 0 20 20">
          <!-- ... -->
        </svg>
      </a>
      <!--end link -->

      <ul class="sidenav-v4__sub-list">
        <!-- ... -->
      </ul>
    </li>
  </ul>
</nav>

Categories

Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.