Version
has been released! Read the upgrade guide

Sidebar (Experimental)

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

An application sidebar with icons and indicators, fixed to the left of the screen.

Overview

The Sidebar is a navigational component. It is fixed to the left-hand of the screen and extends the full height of the browser. This component stays in place whilst the application scrolls, ensuring top navigational items are always within the user's reach.

1Usage

Only one Sidebar component should be used per page. It should contain your top level navigational items, not sub-navigational items/actions for a single page.

2Anatomy

The sidebar component has two main sections - the main navigational area at the top of the bar, and the fixed area at the bottom of the bar.

  1. Collapse Toggle. Toggles the sidebar between the collapsed and expanded views.

  2. Search (optional). Integrated search bar.

  3. Navigation Item. The main navigational elements of the sidebar. Must contain at least two actions.

  4. Secondary Menu (optional). Optional menu to add additional functionality to navigation items.

  5. Secondary Menu Sheet. Toggled when the Secondary Menu action is clicked.

  6. Notifications (optional). Displays any outstanding notifications for the user.

  7. User Account (optional). Contains information for the currently logged in user. Has a sub menu for profile links and logout actions.

3Sizing & Spacing

The Sidebar is only available in one size. As this is a top-level component, customisation is limited (outside of link destinations).

4Hierarchy & Placement

As the Sidebar is a top-level component, only one should be used per application. It is fixed to the left-hand edge of the application.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright