We use some essential cookies to make this service work.
We'd also like to use analytics cookies so we can understand how you use the service and make improvements.
You have accepted optional cookies. You can change your cookie settings on the cookies page.
You have rejected optional cookies. You can change your cookie settings on the cookies page.
This is a new service – give us your feedback to help improve it.
Components
Add secondary navigation to allow users to navigate between different areas of your service.
<nav class="tna-secondary-navigation" aria-label="Sections">
<h2 class="tna-secondary-navigation__heading tna-heading-s">
Sections
</h2>
<ul class="tna-secondary-navigation__items">
<li class="tna-secondary-navigation__item">
<a href="#" class="tna-secondary-navigation__link">Alpha</a>
</li>
<li class="tna-secondary-navigation__item tna-secondary-navigation__item--current">
<a href="#" class="tna-secondary-navigation__link">Beta</a>
</li>
<li class="tna-secondary-navigation__item">
<a href="#" class="tna-secondary-navigation__link">Gamma</a>
</li>
<li class="tna-secondary-navigation__item">
<a href="#" class="tna-secondary-navigation__link">Delta</a>
</li>
</ul>
</nav>| Name | Type | Description |
|---|---|---|
| title | string |
Required. |
| headingLevel | number |
Required. |
| items | array |
Required. |
| noBottomBorder | boolean | |
| overflow | boolean | |
| noUnindentation | boolean | |
| classes | string |
Classes to add to the secondary navigation. |
| attributes | object |
HTML attributes (for example data attributes) to add to the secondary navigation. |
| Name | Type | Description |
|---|---|---|
| text | string |
Required. |
| href | string |
Required. |
| current | boolean |
{% from "nationalarchives/components/secondary-navigation/macro.njk" import tnaSecondaryNavigation %}
{{ tnaSecondaryNavigation({
title: "Sections",
headingLevel: 2,
items: [
{
name: "Alpha",
href: "#"
},
{
name: "Beta",
href: "#",
current: true
},
{
name: "Gamma",
href: "#"
},
{
name: "Delta",
href: "#"
}
],
noUnindentation: true
}) }}