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.

Help us improve the Design System by taking our short survey.

Patterns

List navigation

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

Sample HTML 

<nav aria-label="Category navigation">
    <ul class="ds_category-list">
        <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 list navigation

List navigation displays navigational items in a list. Each item has a vertical line on the left.

The list item is transparent.

The list format makes it easy for users to scan and compare items to find the content they need.

List navigation takes up less screen space than card or grid navigation. Therefore, it’s useful for content-heavy pages.

Consider using list navigation if you have navigational items with long headings and detailed descriptions as there is more space for the text.

How to use list navigation

You can order your list either:

  • alphabetically
  • with the most visited content at the top

Do user research to find out which option suits your users.

Back to top