Navigation
There are several recommended approaches to providing navigation. Using breadcrumbs at the top of the page is a simple and compact way of showing the user the website hierarchy. The right nav offers several options for providing more detailed navigation and could be useful for larger, more complex sites.
Breadcrumbs
Breadcrumbs are usually placed at the top of the page, close to the page title, to help navigate sites with multiple content levels. A disabled 'page title' breadcrumb is unnecessary unless an image or other interface separates the breadcrumbs from the page title.
<nav aria-label="breadcrumbs">
<ul class="breadcrumbs">
<li><a href="link">Home</a></li>
<li><a href="link">Item 1</a></li>
<li><a href="link">Item 2</a></li>
<li><a href="link">Item 3</a></li>
<li><a href="link">Item 4</a></li>
<li><a href="link">Item 5</a></li>
</ul>
</nav>
For space reasons, at small and x-small breakpoints, only the last breadcrumb is displayed, along with a back arrow. Resize your browser to see this in action.
Right nav
The right nav is designed to be displayed on content pages.
- A link to the page's section (grandparent).
- A link to the page's subsection (parent).
- The current page and all of its subpages.
- The other content pages in the section ( the current page's siblings).
On section (parent) and subsection pages, it might not be necessary to display the right nav as these pages might be dedicated to showing the navigation as page content.
<nav class="right-nav" aria-label="Section Menu">
<h2><a href="">Section title</a></h2>
<h3><a href="">Subsection title</a></h3>
<ul>
<li>
<a href="">Content page</a>
<ul>
<li><a href="" class="selected" aria-current="page">Content subpage</a></li>
<li class="selected">Content subpage</li>
<li><a href="">Content subpage</a></li>
<li><a href="">Content subpage</a></li>
</ul>
</li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
</ul>
</nav>
It's possible to not include the subsection and still use this navigation:
<nav class="right-nav" aria-label="Section Menu">
<h2><a href="">Section title</a></h2>
<ul>
<li><a href="" class="selected" aria-current="page">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
</ul>
</nav>
Basic menu
In some instances, a site might not need to display such a detailed hierarchy. For this flatter structure, a flatter navigation is available, dispensing with section and subsection links. Indentation on links is adjusted to suit. Use the class right-nav-simple.
<nav class="right-nav-simple" aria-label="Section Menu">
<ul>
<li><a href="" class="selected" aria-current="page">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
</ul>
</nav>
Sticky navigation
To create a sticky navigation bar, add the class sticky-nav to your navigation element. This will fix the navigation to the top of the viewport as the page scrolls. Once the footer comes into view, the navigation will return to its normal scrolling behavior.
Note: The default top attribute is set to 7.5rem (120px), which positions the navigation 120px below the top of the viewport. You may need to override this value to align with your layout requirements.
<nav class="right-nav sticky-nav">
...
</nav>
Accordion
There's also a variant that uses accordions to hide navigation. It allows the user to quickly access the whole site from any page. This format only suits smaller sites with a relatively balanced structure. The section that contains the page that is currently being viewed should be expanded by default.
<nav class="right-nav-accordion">
<!-- START accordion -->
<div class="accordion-item nav-accordion">
<h2 class="accordion-header" id="nav-section1-head">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#nav-section1-body" aria-expanded="true" aria-controls="nav-section1-body">
Section 1
</button>
</h3>
<div id="nav-section1-body" class="accordion-collapse collapse show" aria-labelledby="nav-section1-head">
<div class="accordion-body">
<ul>
<li><a href="" class="selected" aria-current="page">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
<li><a href="">Content page</a></li>
</ul>
</div>
</div>
</div>
<!-- END accordion -->
<!-- START accordion -->
<div class="accordion-item nav-accordion">
<h2 class="accordion-header" id="nav-section2-head">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-section2-body" aria-expanded="false" aria-controls="nav-section2-body">
Section 2
</button>
</h3>
<div id="nav-section2-body" class="accordion-collapse collapse" aria-labelledby="nav-section2-head">
<div class="accordion-body">
<!-- Content goes here -->
</div>
</div>
</div>
<!-- END accordion -->
<!-- START accordion -->
<div class="accordion-item nav-accordion">
<h2 class="accordion-header" id="nav-section3-head">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nav-section3-body" aria-expanded="false" aria-controls="nav-section3-body">
Section 3
</button>
</h3>
<div id="nav-section3-body" class="accordion-collapse collapse" aria-labelledby="nav-section3-head">
<div class="accordion-body">
<!-- Content goes here -->
</div>
</div>
</div>
<!-- END accordion -->
</nav>
