On large screens it's fixed to the side of the screen, and on smaller screens it overlays the entire screen.
Render the drawer below the toggle button that triggers it. This way the markup remains semantically sound and screen reader friendly.
A header and/or footer can have a "sticky" position if the following properties are applied to their respective elements:
The following CSS variables can be overridden to customize Drawer components:
This component has analytics tracking available. Please see our developer documentation about using analytics in the design system.
- When users need content to remain viewable while also allowing the user to views/interacts with the main page.
- When the content is longer than 2 sentences.
- When the content needs to be available at a particular point in the process, but doesn't need to be included on the main page.
- When the content just needs to be available at the user's discretion, to provide additional details or context.
- When users may need additional information to complete the task than can be supplied on the main page without overwhelming the primary content.
- When the content is timely/urgent, or critical to the action being taken.
- When the content is intended to clarify or call attention to other content on the page.
- When the content must be displayed without being initiated by a user action.
- When additional information is necessary to the primary information the user is interacting with.
- Link text used to trigger the help drawer should be specific and descriptive.
- Avoid using only "Learn more" to link to help drawer content
- Limit the amount of link text
- Drawer content area should include a close button clearly at the top.
- Focus should move to the content in the help drawer after the user has opened it.
- Drawer should support keyboard navigation.
Spaceto select the highlighted item.
Tabto move the focus sequentially through the list of focusable items
Shift + Tabto move the focus sequentially through the list of focusable items in reversed order
hasFocusTrap is an available option that will prevent keyboard focus from leaving the confines of the HelpDrawer when enabled.
When the property
hasFocusTrap is enabled...
- Keyboard focus is trapped within the HelpDrawer component.
- Pressing the escape key will close the Drawer.
A focus trap should not be used when it's anticipated that the user will rely on the Drawer as a reference resource for doing something outside of the Drawer. For instance, if the user is completing a form, Drawer may contain a reference guide defining specific requirements.
However, there are times when it makes sense to trap focus within the Drawer. One occassion where it can benefit the user is when the Drawer is anticipated to fill the viewport of a screen, i.e., mobile layout.
For more information about how we tested and validated our work for each checklist item, read our component maturity documentation.
ColorMeets AA color contrast standards for accessibility and color blindness.Complete
Forced Colors Mode (FCM)While using FCM the components text is legible and improves readability.Complete
WCAG 2.1 Level AA ConformanceAll Axe checks for WCAG AA compliance have passed.Complete
Screen readersVoiceOver, NVDA, and JAWS screen readers provide concise communication and interaction.Complete
Keyboard navigationComponent is fully navigable with a keyboard.Complete
StorybookComponent has stories to cover all defined props.Complete
ResponsiveComponent designed to work in all responsive breakpoints.Complete
Spanish translationsIncludes Spanish translations for default text content.Complete
CodeTokens implemented in code.Complete
DesignTokens implemented in the Sketch.Complete