Navigational pages
Navigational pages display headings and small pieces of content to help users navigate a website.
About this pattern
We use three main types of navigational pages:
- Box navigation - displays hyperlinked headings and summary content in rows of large boxes on desktops and tablets, a single column on mobile
- Grid navigation - orders hyperlinked headings and summary content into rows without boxes on desktops and tablets, a single column on mobile
- List navigation - orders hyperlinked headings and summary content into a list
Card navigation
Sample HTML
<nav aria-label="Category navigation">
<ol class="ds_category-list ds_category-list--grid ds_category-list--narrow">
<li class="ds_card ds_card--no-padding ds_card--has-hover">
<article class="ds_category-item ds_category-item--card ds_category-item--pinned">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-1" href="#" class="ds_category-item__link">
Environment and countryside
<svg class="ds_icon ds_category-item__pinned-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#star"></use></svg>
</a>
</h2>
<p class="ds_category-item__summary">
Access to and protection of the countryside and managing wildlife on your land
</p>
</article>
</li>
<li class="ds_card ds_card--no-padding ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-2" href="#" class="ds_category-item__link">Environmental Impact Assessment (EIA)</a>
</h2>
<p class="ds_category-item__summary">
Find out about Environmental Impact Assessments (EIAs) in your area
</p>
</article>
</li>
<li class="ds_card ds_card--no-padding ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-3" href="#" class="ds_category-item__link">Farming and rural issues</a>
</h2>
<p class="ds_category-item__summary">
Guidance for farming, animal health, agriculture and food businesses in Scotland
</p>
</article>
</li>
<li class="ds_card ds_card--no-padding ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-4" href="#" class="ds_category-item__link">Waste and energy</a>
</h2>
<p class="ds_category-item__summary">
Find advice and support to help your business become more environmentally aware and efficient
</p>
</article>
</li>
<li class="ds_card ds_card--no-padding ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-5" href="#" class="ds_category-item__link">Marine and fisheries</a>
</h2>
<p class="ds_category-item__summary">
Includes information on safety at sea and managing crew
</p>
</article>
</li>
</ol>
</nav>
All cards should contain links.
Single cards can be ‘highlighted’ to make them stand out from others on the page.
Grid navigation
Sample HTML
<nav aria-label="Category navigation">
<ol class="ds_category-list ds_category-list--grid">
<li class="ds_category-item ds_category-item--pinned">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-1" href="#" class="ds_category-item__link">
Environment and countryside
<svg class="ds_icon ds_category-item__pinned-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#star"></use></svg>
</a>
</h2>
<p class="ds_category-item__summary">
Access to and protection of the countryside and managing wildlife on your land
</p>
</li>
<li class="ds_category-item ds_category-item--pinned">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-2" href="#" class="ds_category-item__link">
Environmental Impact Assessment (EIA)
<svg class="ds_icon ds_category-item__pinned-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#star"></use></svg>
</a>
</h2>
<p class="ds_category-item__summary">
Find out about Environmental Impact Assessments (EIAs) in your area
</p>
</li>
<li class="ds_category-item">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-3" href="#" class="ds_category-item__link">Farming and rural issues</a>
</h2>
<p class="ds_category-item__summary">
Guidance for farming, animal health, agriculture and food businesses in Scotland
</p>
</li>
<li class="ds_category-item">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-4" href="#" class="ds_category-item__link">Waste and energy</a>
</h2>
<p class="ds_category-item__summary">
Find advice and support to help your business become more environmentally aware and efficient
</p>
</li>
<li class="ds_category-item">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-5" href="#" class="ds_category-item__link">Marine and fisheries</a>
</h2>
<p class="ds_category-item__summary">
Includes information on safety at sea and managing crew
</p>
</li>
</ol>
</nav>
Although there are no boxes, there is a single, left-hand side line running the total length of each text area (heading plus summary content).
List navigation
Sample HTML
<nav aria-label="Category navigation">
<ol class="ds_category-list">
<li class="ds_category-item ds_category-item--pinned">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-1" href="#" class="ds_category-item__link">
Environment and countryside
<svg class="ds_icon ds_category-item__pinned-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#star"></use></svg>
</a>
</h2>
<p class="ds_category-item__summary">
Access to and protection of the countryside and managing wildlife on your land
</p>
</li>
<li class="ds_category-item ds_category-item--pinned">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-2" href="#" class="ds_category-item__link">
Environmental Impact Assessment (EIA)
<svg class="ds_icon ds_category-item__pinned-icon" aria-hidden="true" role="img"><use xlink:href="/assets/images/icons/icons.stack.svg#star"></use></svg>
</a>
</h2>
<p class="ds_category-item__summary">
Find out about Environmental Impact Assessments (EIAs) in your area
</p>
</li>
<li class="ds_category-item">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-3" href="#" class="ds_category-item__link">Farming and rural issues</a>
</h2>
<p class="ds_category-item__summary">
Guidance for farming, animal health, agriculture and food businesses in Scotland
</p>
</li>
<li class="ds_category-item">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-4" href="#" class="ds_category-item__link">Waste and energy</a>
</h2>
<p class="ds_category-item__summary">
Find advice and support to help your business become more environmentally aware and efficient
</p>
</li>
<li class="ds_category-item">
<h2 class="ds_category-item__title">
<a data-navigation="category-item-5" href="#" class="ds_category-item__link">Marine and fisheries</a>
</h2>
<p class="ds_category-item__summary">
Includes information on safety at sea and managing crew
</p>
</li>
</ol>
</nav>
Links in a navigational list can be highlighted. Links that are highlighted always appear at the top of the list. Other items in the list may be sorted in any order.
Other versions of these patterns
Some versions of box navigation may include a gradient effect along the bottom border of individual boxes.
Why we use these patterns
Features of these patterns, such as the large size of the boxes in the card navigation pattern, help space out content to make it easier for users to find the content they need.
These patterns can also be reused across websites, creating a consistent experience for users and cutting development time.
Website analytics
To understand user behaviour, clicks on navigation items can be tracked through the original page path, the click URL, the click text, and a data attribute showing the item number, for example data-navigation="category-item-1"
.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot