Information

You appear to be using an unsupported browser, and it may not be able to display this site properly. You may wish to upgrade your browser.

Navigational pages

Navigational pages display headings and small pieces of content to help users navigate a website.

About this pattern

We have four types of navigational pages:

  • Card navigation - displays hyperlinked headings and summary content in rows of large boxes on desktops and tablets, a single column on mobile
  • Image card navigation - same as card navigation and each card has an image illustrating it
  • Grid navigation - orders hyperlinked headings and summary content into rows without boxes on desktops and tablets, a single column on mobile
  • List navigation - orders hyperlinked headings and summary content into a list

Card navigation

Sample HTML

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

All cards should contain links.

Image card navigation

Sample HTML

<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">
            <div class="ds_card__media">
                <div class="ds_aspect-box">
                    <img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/thistles-jpg" />
                </div>
            </div>

            <article class="ds_category-item  ds_card__content">
                <h2 class="ds_category-item__title">
                    <a href="#" class="ds_category-item__link">
                        Environment
                    </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">
            <div class="ds_card__media">
                <div class="ds_aspect-box">
                    <img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/clyde-jpg" />
                </div>
            </div>

            <article class="ds_category-item  ds_card__content">
                <h2 class="ds_category-item__title">
                    <a href="#" class="ds_category-item__link">Business and innovation</a>
                </h2> 

                <p class="ds_category-item__summary">
                    Tools and guidance on getting started, finance, premises and employing people.
                </p>
            </article>
        </li>

        <li class="ds_card  ds_card--has-hover">
            <div class="ds_card__media">
                <div class="ds_aspect-box">
                    <img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/edcastle-jpg" />
                </div>
            </div>

            <article class="ds_category-item  ds_card__content">
                <h2 class="ds_category-item__title">
                    <a href="#" class="ds_category-item__link">Tourism and things to do</a>
                </h2>

                <p class="ds_category-item__summary">
                    Accommodation, events, galleries, museums, the countryside and wildlife.
                </p>
            </article>
        </li>

        <li class="ds_card  ds_card--has-hover">
            <div class="ds_card__media">
                <div class="ds_aspect-box">
                    <img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/coast-jpg" />
                </div>
            </div>

            <article class="ds_category-item  ds_card__content">  
                <h2 class="ds_category-item__title">
                    <a href="#" class="ds_category-item__link">Climate change</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">
            <div class="ds_card__media">
                <div class="ds_aspect-box">
                    <img alt="" aria-hidden="true" class="ds_aspect-box__inner" src="/binaries/content/gallery/designsystem/examples/processedcoo-jpg" />
                </div>
            </div>

            <article class="ds_category-item  ds_card__content">
                <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>
    </ul>
</nav>

These cards are designed for images with a 16:9 aspect ratio.

The 'image card' version of navigation pages is currently untested. We plan to include it in future user testing.

Accessibility

The images used in image card navigation are considered to be decorative, and as such they have a blank alt attribute and screen readers are told to ignore them.

Grid navigation

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>

Although there are no boxes, there is a single, left-hand side line running the total length of each text area (heading plus summary content).

List navigation

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>

Other versions of these patterns

Some versions of card navigation may include a gradient effect along the bottom border of individual boxes.

Why we use these patterns

Features of these patterns, such as the large size of the boxes in the card navigation pattern, help space out content to make it easier for users to find the content they need.

These patterns can also be reused across websites, creating a consistent experience for users and cutting development time.

Website analytics

To understand user behaviour, clicks on navigation items can be tracked through the original page path, the click URL, the click text, and a data attribute showing the item number.

The data attributes are added automatically by the Design System’s ‘tracking’ script.

Live example

Sector profiles (tradingnation.mygov.scot)

Country profiles (tradingnation.mygov.scot)

Back to top