We use cookies to collect anonymous data to help us improve your site browsing experience.

Click 'Accept all cookies' to agree to all cookies that collect anonymous data. To only allow the cookies that make the site work, click 'Use essential cookies only.' Visit 'Set cookie preferences' to control specific cookies.

Set cookie preferences

Your cookie preferences have been saved. You can change your cookie settings at any time.

NewPatterns

Grid navigation

Published
8 July 2025
Grid navigation displays links and summary text in a grid.
Open this example in a new window

Sample HTML 

<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.  

Back to top