Component – Side Navigation v4

A vertical, side navigation for dashboard and content management systems.Download + DemoView DemoDownload ComponentHow to
The Side Navigation v4 component is a main, side navigation. It’s ideal for dashboards or content management systems.
The responsi…


This content originally appeared on CodyHouse and was authored by CodyHouse

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

Download + Demo

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>


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2022-01-10T14:06:37+00:00) Component – Side Navigation v4. Retrieved from https://www.scien.cx/2022/01/10/component-side-navigation-v4/

MLA
" » Component – Side Navigation v4." CodyHouse | Sciencx - Monday January 10, 2022, https://www.scien.cx/2022/01/10/component-side-navigation-v4/
HARVARD
CodyHouse | Sciencx Monday January 10, 2022 » Component – Side Navigation v4., viewed ,<https://www.scien.cx/2022/01/10/component-side-navigation-v4/>
VANCOUVER
CodyHouse | Sciencx - » Component – Side Navigation v4. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/10/component-side-navigation-v4/
CHICAGO
" » Component – Side Navigation v4." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2022/01/10/component-side-navigation-v4/
IEEE
" » Component – Side Navigation v4." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2022/01/10/component-side-navigation-v4/. [Accessed: ]
rf:citation
» Component – Side Navigation v4 | CodyHouse | Sciencx | https://www.scien.cx/2022/01/10/component-side-navigation-v4/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts