Drawer
Contents
What is a Drawer?
A Drawer is panel that can appear on any side of the application. It will usually take up the whole height or width and can either push the content or be an overlay.
When, and why?
There are two main purposes of a Drawer: navigation or contextual content. The Drawer is usually used as part of the shell of the application to do site-wide navigation. Contextual content Drawers are used to show options or information that relate to the current page, such as, filters, advanced search options, form submissions, etc. In this case, the Drawer would be triggered by an action a user takes on the main page, e.g. selecting a Button. On mobile, bottom Drawers are also used a instead of Dropdowns to display a list of actions.
Drawer types
The following Drawer types are available:
| Type | Description |
|---|---|
| As empty | An empty Drawer that either overlays content or pushes content over to make space for other content such as, navigation, forms, etc. |
| As content | A Drawer with a header and footer, designed specifically to contain content. |
Drawer properties
The following Drawer properties are available:
| Type | Description |
|---|---|
| Size | Sets the size of a drawer: S (mobile only), M, L, XL |
Using a Drawer
Default or modal?
The choice here depends on if the user should be able to interact with the rest of the page while the Drawer is open. For example, a Navigation Drawer would want to be shown inline with the content (and maybe dismissible) as they might want to keep access to it while using the page they have navigated to. However, if the intention was to complete a task, a Modal Drawer should be used to make the user focus on that task until completion (unless they decide to cancel).
Position
Drawers can be configured to appear at the top, bottom, start or end of a screen and they can be triggered by any action such as the click of a button, the selection of a checkbox, etc. Drawers slide in and out from their specified location. In general, if you are using a Drawer with content they are positioned at the end of the screen.
With content
The content and styling of a Drawer is entirely customisable using other Mosaic components, however you should stick to the Drawer with content layout (header, body, footer) and only customise the body section, unless there is good reason. If you wish to deviate from the layout, you should speak with your UX Designer.
The sections would be used for the following:
Header - Title, subtitle and close button (cross top right) Body - Content to display e.g. filter fields for a table Footer - Buttons for actions the user may need to take
With navigation
A Drawer with navigation will often be used with a Navigation rail, so when an item is selected in the Rail, the Drawer will slide out to provide more navigation options. It can be used without a Rail if the top level navigation is not needed.
For additional examples and API documentation, see Storybook
Live demo
Below, you can find a live demo for a Drawer component. Use the drop-down menus and radio buttons to view the different Drawer Types and Variants.
Select variant
Component accessibility
This component has been built to meet the current WCAG AA 2.1 guidelines. We also test these components against the guidelines before release.
Aria tags
Every component in Mosaic requires an appropriate Aria tag to ensure that screen readers can effectively parse the page. Aria tags are provided as part of Mosaic. Please do not override these without good reason.
Ensure that Aria tags are used as appropriate signposts throughout the product.
Colour Combinations
When designing with a Drawer, you should be mindful of the colour combinations you are using. The components have been designed with this in mind, but if you are using colours that are not part of the default component, please ensure that there is a clear colour contrast within the parts of the component and between the Drawer and the background it is on. To check the contrast, please use WebAIM's contrast checker.
Focus state
A Drawer needs to have a focus state - a focus state is when you tab into an element to interact with it. Ensure that users can use their keyboard to focus on the Drawer and all of its contents.
Icons
An icon needs to have underlying code that describes what action the icon takes. the labels should be specific - for example, a 'bin' icon for delete should be labelled 'delete' not 'bin'.
Key Binding
A Drawer needs to be able to be interacted with via a keyboard. Where possible we will provide key-binds within our Mosaic component or there will be default HTML ones. If this isn't the case then please implement logical key-binds for all intractable components.
Movement/Animation
Please refer to the WCAG guidelines for the time-based considerations for animations.
| Design | Documentation | HTML/CSS | Web Component |
|---|---|---|---|