Agriculture Design System
Design System for the Export Service

App layout

The app layout provides a consistent way for users to navigate around a web application and access their account settings.

View in StorybookView in Github
import { ... } from '@ag.ds-next/react/app-layout';


The app layout is a single component that consists of 3 parts. All 3 parts should be used together across all pages of a web application.

  1. App layout header
  2. App layout sidebar
  3. App layout footer

Use the app layout for web applications, not informational websites, as the layout is better suited to task-oriented interactions.

Screenshot of App layout components with annotations labelling the header, sidebar and footer

Usage guidelines


  • use the app layout for web applications i.e. task oriented websites that users generally need to sign in to access.
  • use the app layout consistently on all pages of an application
  • display the app layout sidebar by default on general app pages
  • hide the app layout sidebar for forms to support user focus
  • use all parts of the app layout always


App layout header

The app layout header tells users what application they’re using and displays the logo.

  • Heading and subline - The heading should be set to the website or service title and the subline can be used to provide additional information to describe your website or service.

  • Account details - A user’s name and avatar or entity information should be displayed in the top right corner to clearly show which account they’re signed in to. Users can access their account settings via the dropdown.

App layout sidebar

The app layout sidebar houses the main navigational menu which provides users with a consistent way to navigate around a web application.

Each menu item can have an optional icon on the left to help users scan the menu faster. Menu items can also have a Notification badge on the right to indicate the number of notifications.

The app layout sidebar should be hidden while users are completing multi-page forms. This is known as focus mode and is intended to reduce distractions and cognitive load.

Screenshot of App layout components in focus mode with annotations labelling the header and footer

The footer lives at the bottom of a page and generally contains copyright information and links to other sections of the website application.

  • Focus mode Used to help reduce distractions so that users can focus on completing a specific task.