Use different combinations of navigation components and page content to create different layouts.

Some combinations work better for particular use cases. Side navigation takes up less room on data-heavy apps, but top navigation offers simpler navigation for content-based apps. Use the following templates to quickly create new pages.

Side navigation is preferred for most apps as it provides more screen space for main content.

Use the side navigation layout for data-heavy apps. This template prioritises the main content area, giving it the full height and width of the viewport. The navigation items in the side navigation give access to your app’s main functions from every page.

Top navigation works well for content-based apps, such as an intranet, blog or this Design System. The main navigation items can always be accessed at the top of the page. This layout often uses large margins to achieve a readable line-length for the page’s main content section.

Use secondary navigation components within these templates to provide additional navigation within each main section of an app.

A page header can be added to any page in an app, giving it a title as well as offering secondary-navigation options through tabs or a stepper.

Use tabs to provide access to related pages where the content is mutually exclusive from one another.

Use a stepper to signpost a user through a linear series of steps to complete a process or view information in a particular order.

A hero can be included on homepages to signpost key links or actions in an emphasised position. Don’t use hero banners on every page though.

When using these layout templates use appropriate HTML regions such as<main> and<nav> .