Navigation drawer
Importing
Add rh-navigation-drawer to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-navigation-drawer/rh-navigation-drawer.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<!-- A parent container element with container-type: inline-size is required -->
<div class="container">
<rh-navigation-drawer>
Drawer content
</rh-navigation-drawer>
</div>
<script type="module">
import '@rhds/elements/rh-navigation-drawer/rh-navigation-drawer.js';
</script>
<style>
.container {
container-type: inline-size;
height: 100%;
}
</style>rh-navigation-drawer
Navigation Drawer is a component that displays a navigation menu in a vertical drawer in wide viewports and a disclosure in narrow viewports.
| Slot Name | Description |
|---|---|
|
Drawer content such as vertical navigation elements |
header |
(optional) header content such as titles and filters |
footer |
(optional) Footer content such as links and copyright info |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
container |
container |
The selector for the element to observe for container width sizing |
|
|
collapsible |
collapsible |
Whether the drawer can be collapsed (shows toggle button) |
|
|
accessible-label-collapsed |
accessibleLabelCollapsed |
The accessible label for the collapsed state |
|
|
accessible-label-expanded |
accessibleLabelExpanded |
The accessible label for the expanded state |
|
|
expand-at |
expandAt |
Breakpoint at which the element switches from mobile disclosure pattern to a drawer Available breakpoints: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' |
|
|
menu-label |
menuLabel |
The label for the menu |
|
|
| Method Name | Description |
|---|---|
toggle() |
| Event Name | Description |
|---|---|
toggle |
| CSS Property | Description | Default |
|---|---|---|
--rh-z-index-navigation-drawer |
The z-index of the navigation drawer, defaults to 102 |
—
|
| Token | Copy |
|---|---|
--rh-border-radius-pill
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-border-interactive
|
|
--rh-color-border-subtle
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-surface
|
|
--rh-space-2xl
|
|
--rh-space-3xl
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xl
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Other libraries
To learn more about our other libraries, visit the getting started page.
