Components menu
Side navigation
The side navigation is a list of links to other parts of the same web page or to other pages. It sits alongside the page content.
About this component
A side navigation can be made up of a flat or nested list of links.
The side navigation will highlight the page in the list that the user is on and each link should take the user to distinct content.
If the side navigation has a structure with nested sections, it should:
- display all the pages in a section when a user selects the section
- stay under 10 sections
- have no more than 3 levels in total
The side navigation should also:
- not repeat or be combined with grid navigation pages
- not include icons
- include a limited character count for links to avoid spanning over too many lines
The mobile version of side navigation is minimised into an expandable list (collapsed) at the top of the page.
Why we use this component
The side navigation gives users a snapshot of content within the user’s current website, as well as it sits in terms of the whole website. Since it’s on the left hand side of the page, it also supports left to right reading.
HTML
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12">
<div class="d-none d-lg-block">
<ul class="side--navigation">
<li class="side--navigation-items">
<ul>
<li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 1 </a> </li>
<li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 2 </a> </li>
<li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 3 </a> </li>
</ul>
</li>
</ul>
</div> <!-- // Desktop view -->
<div class="d-lg-none">
<div class="component-collapse-card col-12 float-start">
<div class="col-xxl-9 col-xl-9 col-lg-9 col-md-9 col-sm-8 col-12 float-start">
<h2>Pages in this section</h2>
</div>
<div class="col-xxl-3 col-lg-3 col-md-3 col-sm-4 col-12 float-end">
<a class="card-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-lefthandmenu" aria-expanded="false" aria-controls="collapse-lefthandmenu"> View menu <i class="card-link-icon fa-solid fa-circle-chevron-down" aria-hidden="true"></i> </a>
</div>
<div class="collapse col-12 float-start" id="collapse-lefthandmenu">
<ul class="side--navigation">
<li class="side--navigation-items">
<ul>
<li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 1 </a> </li>
<li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 2 </a> </li>
<li class="side--navigation-item-child"> <a class="side--navigation-item-link" href=""> Item 3 </a> </li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!-- // Mobile view - Collapse component -->
</div>
CSS
/* Side navigation
------------------------------------ */
.dropdown-toggle {
outline: 0;
}
.btn-toggle {
padding: .25rem .5rem;
font-weight: 600;
color: #000000;
background-color: transparent;
}
.btn-toggle:hover, .btn-toggle:focus {
color: #000000;
}
.btn-toggle::before {
width: 1.25em;
line-height: 0;
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
transition: transform .35s ease;
transform-origin: .5em 50%;
padding-right: 10px;
padding-top: 4px;
}
.btn-toggle[aria-expanded="true"] {
color: var(--scottish-teal);
background-color: var(--grey-three);
border-left: 4px solid var(--verdant-green);
border-radius: 0;
padding: 10px 15px;
}
.btn-toggle[aria-expanded="true"]::before {
transform: rotate(90deg);
}
ul.side--navigation {
padding: 0;
list-style: none;
}
.side--navigation-items {
margin-bottom: 15px;
list-style: none;
}
li.side--navigation-items ul {
margin: 0;
padding: 0;
}
.side--navigation-item-parent {
padding: 10px 15px;
background-color: var(--grey-four);
border-top: 2px solid var(--grey-one);
}
.side--navigation-item-parent a {
color: #000000;
font-weight: 600;
text-decoration: none;
border: none;
}
.side--navigation-item-parent.active {
background-color: var(--grey-four);
border-top: 2px solid var(--verdant-green);
padding: 10px 15px;
font-weight: 600;
}
li.side--navigation-item-child.active {
background-color: var(--grey-four);
border-top: 2px solid var(--verdant-green);
padding: 10px 15px 10px 30px;
font-weight: 600;
}
li.side--navigation-item-child {
list-style: none;
padding: 5px 10px 5px 30px;
margin: 0;
border-top: 2px solid #ffffff;
}
li.side--navigation-item-child a.side--navigation-item-link {
color: var(--grey-one);
text-decoration: none;
word-wrap: break-word;
border: none;
}
.side--navigation-item-parent:hover, li.side--navigation-item-child:hover {
color: #000000;
background-color: var(--grey-four);
text-decoration: none;
}
.side--navigation-item-parent a.side--navigation-item-link:hover, li.side--navigation-item-child a.side--navigation-item-link:hover {
color: #000000;
background-color: var(--grey-four);
text-decoration: none;
}
.side--navigation-item-parent a.side--navigation-item-link:focus, li.side--navigation-item-child a.side--navigation-item-link:focus {
background-color: var(--verdant-green);
color: #000000;
border-bottom: 2px solid var(--grey-one);
text-decoration: none;
}
.side--navigation-collapse-card {
margin-bottom: 10px;
background: var(--grey-four);
padding: 15px;
}
.side--navigation-collapse-card a.card-link:hover {
margin-bottom: 10px;
}
.side--navigation-collapse-card-open {
padding-top: 30px;
}