Drawer

Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and Bootstrap’s JavaScript plugin.

How it works

Drawer is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke Bootstrap’s JavaScript.

Drawer shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
Similarly, some source Sass variables for drawer’s styles and dimensions are inherited from the modal’s variables.
When shown, drawer includes a default backdrop that can be clicked to hide the drawer.
Similar to modals, only one drawer can be shown at a time.

Heads up! Given how CSS handles animations, you cannot use margin or translate in a Bootstrap drawer element. Instead, use the class as an independent wrapping element.

Drawer components

Below is an drawer example that is displayed when the button is clicked. Add @props="drawer-toggle" to an <xref> element to associate a button to an drawer

Click here to display drawer

<xref outputclass="btn-primary" props="drawer-toggle" href="#drawer1">
  Click here
</xref>
<section outputclass="drawer-start" id="drawer1">
  <title>Drawer</title>
  <p>
    Content for the drawer goes here. You can place just about any section elements here.
  </p>
</section>

<button props="drawer-toggle" href="#drawer1">
  Click here
</button>
<drawer id="drawer1" position="start">
  <title>Drawer</title>
  <p>
    Content for the drawer goes here. You can place just about any section elements here.
  </p>
</drawer>

Placement

There’s no default placement for drawer components, so you must add one of the modifier outputclasses below

Setting @position="start" or @outputclass="drawer-start" places drawer on the left of the viewport (shown above)
Setting @position="end" or @outputclass="drawer-end" places drawer on the right of the viewport
Setting @position="bottom" or @outputclass="drawer-bottom" places drawer on the bottom of the viewport
Setting @position="top" or @outputclass="drawer-top" places drawer on the top of the viewport

Toggle right drawer

<section outputclass="drawer-end" id="drawer2">
  ...etc
</section>

<drawer position="end">
  ...etc
</drawer>

Toggle bottom drawer

<section outputclass="drawer-bottom" id="drawer3">
  ...etc
</section>

<drawer position="bottom">
  ...etc
</drawer>

Responsive

Responsive drawer outputclasses hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, @outputclass="drawer-lg" hides content in an drawer below the lg breakpoint, but shows the content above the lg breakpoint.

Toggle drawer

Responsive drawer classes are available across for each breakpoint.

@outputclass="drawer"
@outputclass="drawer-sm"
@outputclass="drawer-md"
@outputclass="drawer-lg"
@outputclass="drawer-xl"
@outputclass="drawer-xxl"

<note outputclass="d-none lg:d-block">
  Resize your browser to show the responsive drawer toggle.
</note>
<xref outputclass="btn-primary lg:d-none" props="drawer-toggle" href="#drawer4">
  Toggle drawer
</xref>
<section outputclass="drawer-lg" id="drawer4">
  <title>Drawer</title>
  <p>
    This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>.
  </p>
</section>

<note color="info" outputclass="d-none lg:d-block">
  Resize your browser to show the responsive drawer toggle.
</note>
<button outputclass="lg:d-none" props="drawer-toggle" href="#drawer4">
  Toggle drawer
</button>
<drawer outputclass="drawer-lg" id="drawer4">
  <title>Drawer</title>
  <p>
    This is content within an <xmlatt>outputclass="drawer-lg"</xmlatt>.
  </p>
</drawer>