Grid navigation
Sample HTML for Grid navigation example
<nav aria-label="Category navigation">
<ul class="ds_category-list ds_category-list--grid">
<li class="ds_category-item ">
<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>
</li>
<li class="ds_category-item">
<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>
</li>
<li class="ds_category-item">
<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>
</li>
<li class="ds_category-item">
<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>
</li>
<li class="ds_category-item">
<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>
</li>
</ul>
</nav>
About grid navigation
Grid navigation displays hyperlinked headings and summary text in rows without boxes.
Each grid item has a vertical line on the left. There are 3 items per row on desktop and 2 items per row on tablet.
On mobile, the items display in a single column.
The grid item is transparent.
Grid navigation takes up less screen space than card navigation.
How to use grid navigation
Do not use grid navigation with side navigation. This can lead to a cluttered page and a confusing experience for users.