Side navigation provides persistent navigation for product or section content. It gives users a consistent way to move between primary sections while maintaining context within the interface.
<ul className="c-side-nav w-64">
<li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--active">
<a className="c-side-nav__item" href="#">
<FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
<span className="c-side-nav__item-title">Item</span>
<FontAwesomeIcon className="c-side-nav__item-icon" icon={faAngleUp} fixedWidth />
</a>
<ul className="c-side-nav__subitems">
<li>
<a className="c-side-nav__subitem c-side-nav__subitem--active" href="#">
<span className="c-side-nav__subitem-title">Subitem</span>
</a>
</li>
<li>
<a className="c-side-nav__subitem " href="#">
<span className="c-side-nav__subitem-title">Subitem</span>
</a>
</li>
</ul>
</li>
<li className="c-side-nav__section c-side-nav__section--purple c-side-nav__section--open">
<a className="c-side-nav__item" href="#">
<FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
<span className="c-side-nav__item-title">Item</span>
<FontAwesomeIcon className="c-side-nav__item-icon" icon={faAngleUp} fixedWidth />
</a>
<ul className="c-side-nav__subitems">
<li>
<a className="c-side-nav__subitem" href="#">
<span className="c-side-nav__subitem-title">Subitem</span>
</a>
</li>
<li>
<a className="c-side-nav__subitem " href="#">
<span className="c-side-nav__subitem-title">Subitem</span>
</a>
</li>
</ul>
</li>
<li>
<a className="c-side-nav__item" href="#">
<FontAwesomeIcon className="c-side-nav__item-icon" icon={faStroopwafel} fixedWidth />
<span className="c-side-nav__item-title">Item</span>
<FontAwesomeIcon className="c-side-nav__item-icon" icon={faAngleDown} fixedWidth />
</a>
<ul className="c-side-nav__subitems">
<li>
<a className="c-side-nav__subitem" href="#">
<span className="c-side-nav__subitem-title">Subitem</span>
</a>
</li>
<li>
<a className="c-side-nav__subitem " href="#">
<span className="c-side-nav__subitem-title">Subitem</span>
</a>
</li>
</ul>
</li>
</ul>
|
Elements |
Class name |
|
|---|---|---|
|
Element |
.c-side-nav |
ul |
|
Section |
.c-side-nav__section |
li |
|
Items |
.c-side-nav__item |
a |
|
Item icon |
.c-side-nav__item-icon |
|
|
Item title |
.c-side-nav__item-title |
span |
|
Subitems |
.c-side-nav__subitems |
ul |
|
Subitem |
.c-side-nav__subitem |
a |
|
Subitem title |
.c-side-nav__subitem-title |
span |
|
Elements |
Class name |
|
|---|---|---|
|
Element |
.c-side-nav |
ul |
|
Section |
.c-side-nav__section |
li |
|
Items |
.c-side-nav__item |
a |
|
Item icon |
.c-side-nav__item-icon |
|
|
Item title |
.c-side-nav__item-title |
span |
|
Subitems |
.c-side-nav__subitems |
ul |
|
Subitem |
.c-side-nav__subitem |
a |
|
Subitem title |
.c-side-nav__subitem-title |
span |