Navigational pages
Sample HTML for Card navigation example
<nav aria-label="Category navigation">
<ul class="ds_category-list ds_category-list--grid ds_category-list--narrow">
<li class="ds_card ds_card--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a href="#" class="ds_category-item__link">
Environment and countryside
</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--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a 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--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a 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--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a 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--has-hover">
<article class="ds_category-item ds_category-item--card">
<h2 class="ds_category-item__title">
<a 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>
</ul>
</nav>About this pattern
Navigational pages help users browse a website to find the information they need.
There are 3 types of navigational page:
You can download these navigational pages in the Design System prototyping kits.
When to use this pattern
Use navigational pages to help users navigate your website or a section of your website.
There are 2 other navigation options available on the Design System:
Consider using a navigational page when:
- there are more links than would fit in site navigation or side navigation
- you need to add a description of the content you’re linking to
- you want to help users drill down to specific information within a topic
Structuring the content
Before you build a navigational page, you should review the structure of the website. Make sure you’ve organised the content logically. Simplify user journeys as much as possible.
You may need to do user research, such as card sorting, to ensure your content is categorised in a user-focused way.
How to use this pattern
Use the navigation layout to set up your navigational page.
Each card, grid or list item on a navigational page must contain:
- a hyperlinked heading – use the same heading as the heading on the page that you’re linking to
- summary text – make this concise and reflect the subject matter of the page that you’re linking to
Accessibility
We’ve ensured that each of these navigational page types have clear focus state styling.
Website analytics
To understand user behaviour, you can track clicks on navigational items through the:
- original page path
- click URL
- click text
- data attribute showing the item number
The data attributes are added automatically by the Design System’s ‘tracking’ script.