Navigational pages
Sample HTML for Card navigation example
<div class="ds_wrapper">
<div class="ds_card-grid-container">
<div class="ds_card-grid ds_card-grid--min-height ds_card-grid--narrow ds_card-grid--medium-2">
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Environment and countryside</a></h2>
</div>
<div class="ds_card__content-main">Access to and protection of the countryside and managing wildlife on your land</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Environmental Impact Assessment (EIA)</a></h2>
</div>
<div class="ds_card__content-main">Find out about Environmental Impact Assessments (EIAs) in your area</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Farming and rural issues</a></h2>
</div>
<div class="ds_card__content-main">Guidance for farming, animal health, agriculture and food businesses in Scotland</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Waste and energy</a></h2>
</div>
<div class="ds_card__content-main">Find advice and support to help your business become more environmentally aware and efficient</div>
</div>
</div>
<div class="ds_card ds_card--navigation">
<div class="ds_card__content">
<div class="ds_card__content-header">
<h2 class="ds_card__title">
<a class="ds_card__link ds_card__link--cover" href="#">Marine and fisheries</a></h2>
</div>
<div class="ds_card__content-main">Includes information on safety at sea and managing crew</div>
</div>
</div>
</div>
</div>
</div>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
- selected URL (also known as click URL)
- selected text (also known as click text)
- data attribute showing the item number
The data attributes are added automatically by the Design System’s ‘tracking’ script.
Tracking attributes
Category list links get a data-navigation attribute. Its value uses the pattern category-item-[index] where the index is one-based.
<a href="#" class="ds_category-item__link" data-navigation="category-item-3">Farming and rural issues</a>