Version
has been released! Read the upgrade guide

Drawer

The documentation on this page is considered legacy.

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

Overview

Drawer is a simple panel that can be triggered to appear on the right hand side of the screen.

1Usage

The Drawer is used to show more details for a specific item in a list or table. It provides an inline way to view more comprehensive information about the item, including space for forms and images.

2Anatomy

  1. Sheet. Much like the Card component, the Drawer Sheet is a blank canvas to add components to.

  2. Close Button. The Close Button triggers the hiding animation, causing the Drawer to slide out to the right of the viewport.

3States

The Drawer has two states - hidden and visible. By default, the Drawer is hidden off the right hand side of the screen. Clicking on an item that triggers the Drawer will cause the drawer to slide in from the edge of the screen.

Clicking the Close button will reverse this animation.

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