Menu used to organise and categorise section content.
Section navigation sits on the left side of the page on large screens, collapsing into a menu with a label of 'Section menu' and a menu icon on smaller screens.
Section navigation arranges content hierarchically based on the structure of your site or application. It helps users understand the structure of the site or app and find their way around easily. It's designed to go 5 levels down. However, the deeper the information architecture, the more users will struggle to navigate your website or application. Content is more discoverable when it isn't buried under multiple layers.
Nielsen Norman Group says:
“the deeper a hierarchy becomes, the more likely visitors are to become disoriented.”
A well thought through information architecture provides a consistent navigation experience across pages, contributing to a seamless and user-friendly interface.
Do:
Avoid:
Neilson Norman Group
Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan
Neilson Norman Group
Flat vs. Deep Website Hierarchies
<div class="row">
<div class="col-md-3">
<div id="leftnav" class="closed hidden-xs hidden-sm">
<div class="left-nav-heading">
<a href="#">Navigation (section)</a>
</div>
<div class="left-nav-body">
<ul>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#/" class="active open open-highlight has-children">Level 1 with children</a></li>
<li>
<ul>
<li><a href="#" class="">Level 2</a></li>
<li><a href="#" class="has-children">Level 2 with children</a></li>
<li><a href="#" class="">Level 2 with children</a></li>
</ul>
</li>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#" class="has-children">Level 1 with children</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
</div>
</div>
<div class="row">
<div class="col-md-3">
<div id="leftnav" class="closed hidden-xs hidden-sm">
<div class="left-nav-heading">
<a href="#">Navigation (section)</a>
</div>
<div class="left-nav-body">
<ul>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#/" class="active open open-highlight has-children">Level 1 with children</a></li>
<li>
<ul>
<li><a href="#" class="">Level 2</a></li>
<li><a href="#" class="has-children">Level 2 with children</a></li>
<li><a href="#" class="">Level 2 with children</a></li>
</ul>
</li>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#" class="has-children">Level 1 with children</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
</div>
</div>
This component has not yet been tested
