Navigation (section)
Menu used to organise and categorise section content.
Examples
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.
Usage
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:
- create an intuitive information architecture through user research methods such as card sorting and tree testing
- use categories and subcategories to group related content
- use clear and concise labels for navigation items, ensuring users understand the purpose of each section
- organise navigation items hierarchically to reflect the structure of the content, place more important or frequently used items higher in the hierarchy
- conduct user testing to verify the effectiveness and efficiency of the navigation structure
Avoid:
- overcrowding the left-hand navigation with too many items, keep it streamlined to prevent overwhelming users
- a section structure that is more than 5 levels deep but ideally try not to exceed 3 levels
References
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>
Accessibility status
This component has not yet been tested
