Skip to main content Skip to navigation Skip to search

Sidenav

CSS

Use these classes to create a sidenav component. It must be a child of .main-container and a sibling after .content-area.

Classes

CSS Class Host Element(s) Type Description Required
.sidenav nav layout A navigation element for the sidenav content. yes
.sidenav-content div layout A container element for one or more .nav-group elements yes
.nav-group section layout An element used to create a collapsible container of nav links. yes
.collapsible section When composed with .nav-group it makes the section expand and collapse. no
.nav-list ul layout A list of navigation links. yes
.nav-link li style An element used to designate navigation for an application. yes
.active li style When composed with .nav-link it visually indicates the active navigation element in the sidnav. yes - only on one .nav-link at a time.