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.

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.

NewStyles

Navigation layout

Published
4 February 2025
Use the navigation layout for secondary navigation pages.
The category list layout changes depending on the width of the browser window. On large displays the list and feedback sections are limited to eight columns wide, whereas on smaller displays the list and feedback sections are take up the full width of the page.

Sample HTML 

<main class="ds_layout ds_layout--category-list">
<div class="ds_layout__header">
<!--
A ds_page-header component or other header content
-->
</div>

<div class="ds_layout__content">
<!--
The article content
-->
</div>

<div class="ds_layout__list">
<!--
List navigation
-->
</div>

<div class="ds_layout__grid">
<!--
Grid navigation
-->
</div>

<div class="ds_layout__feedback">
<!--
Feedback form
-->
</div>
</main>

About the navigation layout

Use the navigation layout for secondary navigation pages.  

Secondary navigation pages help users find content on a website. For example, the benefits navigation page on mygov.scot.  

The layout has the following areas:

  • header
  • body content
  • list
  • grid
  • feedback

The navigation layout changes depending on the width of the browser window. 

How to use the navigation layout 

Copy the HTML into the middle of the page template.

Back to top