Navigation layout
Use the navigation layout for secondary navigation pages.
Sample HTML for Category list layout
<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.