The drawer component is used to provide a hidden off-screen section that can be revealed by the user. It is commonly used to provide additional navigation or content that is not immediately necessary, but can be easily accessed when needed.
Example
Provides a slide-in panel from screen edges for navigation or additional content.
This is a drawer
code
<bp-button popovertarget="drawer" action="secondary">open drawer</bp-button>
<bp-drawer id="drawer" closable>
<p bp-text="content">This is a drawer</p>
</bp-drawer>
<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';
</script>Right
Shows drawer sliding in from the right side.
This is a drawer
code
<bp-button popovertarget="right-drawer" action="secondary">right</bp-button>
<bp-drawer id="right-drawer" position="right" closable>
<p bp-text="content">This is a drawer</p>
</bp-drawer>
<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';
</script>Left
Shows drawer sliding in from the left side.
This is a drawer
code
<bp-button popovertarget="left-drawer" action="secondary">left</bp-button>
<bp-drawer id="left-drawer" position="left" closable>
<p bp-text="content">This is a drawer</p>
</bp-drawer>
<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';
</script>Install
NPM
// npm package
import '@blueprintui/components/include/drawer.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/drawer.js/+esm';
</script>Accessibility
- Use a button or link to open and close the drawer, rather than relying on hover or swipe gestures.
bp-drawer
Events
| Name | Types | Description |
|---|---|---|
open | dispatched when the drawer is opened | |
close | dispatched when the drawer is closed |
Properties
| Name | Types | Description |
|---|---|---|
closable | boolean | Controls whether the drawer displays a close button, allowing users to dismiss it |
position | 'left' | 'right' | Controls the drawer position relative to the viewport, sliding in from the left or right edge |
i18n | Provides internationalization strings for accessibility labels and screen reader announcements |
Attributes
| Name | Types | Description |
|---|---|---|
closable | boolean | Controls whether the drawer displays a close button, allowing users to dismiss it |
position | 'left' | 'right' | Controls the drawer position relative to the viewport, sliding in from the left or right edge |
i18n | Provides internationalization strings for accessibility labels and screen reader announcements |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--padding | ||
--width | ||
--height | ||
--overflow |
Slots
| Name | Types | Description |
|---|---|---|
default | slot for drawer content |