Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow 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. The content of a drawer should be clearly organized and labeled, and should be related to the main content of the page.

Example

leftright
code
<bp-drawer closable hidden>
<p bp-text="content">This is a drawer</p>
</bp-drawer>

<div id="drawer-options" bp-layout="inline gap:xs">
<bp-button value="left" action="outline">left</bp-button>
<bp-button value="right" action="outline">right</bp-button>
</div>

<script type="module">
import '@blueprintui/components/include/drawer.js';
import '@blueprintui/components/include/button.js';

const drawer = document.querySelector('bp-drawer');
const options = document.querySelector('#drawer-options');

options.addEventListener('click', (e) => {
if (e.target.tagName === 'BP-BUTTON') {
drawer.position = e.target.value;
drawer.hidden = false;
}
});

drawer.addEventListener('close', () => (drawer.hidden = true));
</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

Properties

NameTypesDescription
closableboolean
staticboolean
position'left' | 'right'
i18n

Attributes

NameTypesDescription
closableboolean
staticboolean
position'left' | 'right'
i18n

CSS Properties

NameTypesDescription
--background:var(--bp-layer-container-background);
--padding
--width
--height
--overflow

Slots

NameTypesDescription
defaultslot for drawer content