lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubIntegrationsAngularVueReactDemosFoundationThemesTypographyIconsPopoversInternationalizationDrag and DropKeyboard NavigationLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPagePaginationPanelPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVClipboardColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

open drawer

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

right

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

left

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

NameTypesDescription
opendispatched when the drawer is opened
closedispatched when the drawer is closed

Properties

NameTypesDescription
closablebooleandetermine if the drawer has a close button
position'left' | 'right'determines drawer position relative to viewport
i18nset default aria/i18n strings

Attributes

NameTypesDescription
closablebooleandetermine if the drawer has a close button
position'left' | 'right'determines drawer position relative to viewport
i18nset default aria/i18n strings

CSS Properties

NameTypesDescription
--background
--padding
--width
--height
--overflow

Slots

NameTypesDescription
defaultslot for drawer content