Version
has been released! Read the upgrade guide

Sidebar (Deprecated)

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 for NELSON applications. 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. Container. This is a fixed width and places the component on the left-hand edge of the application.

  2. App Nav. This section contains navigational items for the current application. This can be customised to meet the application's requirements.

  3. Indicators. The Indicator sections are fixed throughout all NELSON applications. This section (optionally) contains a profile button and a notification sheet.

3Sizing & Spacing

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

4States

The sidebar has two states - collapsed and expanded. By default, the sidebar is collapsed to the left of the screen. Hovering on any of the App Nav link icons will expand the sidebar to show the associated labels.

5Hierarchy & 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