BeeDrawer

A panel that slides in from an edge of the screen, for filters, a menu or a secondary form. Like BeeModal, it blocks the page behind it, keeps keyboard focus inside and closes with Escape.

import { BeeDrawer } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Usage

Opening is controlled with v-model:open. The title is required: it appears in the header and serves as the panel's accessible name. The header stays visible, only the content scrolls.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer, BeeFlex } from "@thaisrr/beedesign";

const open = ref(false);
const filters = ["Beginners", "Free", "Online", "Weekends"];
</script>

<template>
  <BeeButton @click="open = true">Filter workshops</BeeButton>

  <BeeDrawer v-model:open="open" title="Filters">
    <ul class="filters">
      <li v-for="filter in filters" :key="filter">
        <label><input type="checkbox" /> {{ filter }}</label>
      </li>
    </ul>

    <BeeFlex justify="flex-end" :gap="8" :responsive="false">
      <BeeButton variant="ghost" @click="open = false">Cancel</BeeButton>
      <BeeButton @click="open = false">Apply</BeeButton>
    </BeeFlex>
  </BeeDrawer>
</template>

<style scoped>
.filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--bd-color-primary);
}
</style>

Side

The side prop picks the edge: right (default), left, top or bottom. Left and right panels take the full height, top and bottom panels take the full width.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer, BeeFlex } from "@thaisrr/beedesign";

type Side = "left" | "right" | "top" | "bottom";

const open = ref(false);
const side = ref<Side>("right");

function show(value: Side) {
  side.value = value;
  open.value = true;
}
</script>

<template>
  <BeeFlex justify="flex-start" :gap="12" :responsive="false">
    <BeeButton variant="secondary" @click="show('left')">Left</BeeButton>
    <BeeButton variant="secondary" @click="show('right')">Right</BeeButton>
    <BeeButton variant="secondary" @click="show('top')">Top</BeeButton>
    <BeeButton variant="secondary" @click="show('bottom')">Bottom</BeeButton>
  </BeeFlex>

  <BeeDrawer v-model:open="open" :side="side" :title="`From ${side}`">
    <p class="text">This panel slides in from the {{ side }} edge.</p>
  </BeeDrawer>
</template>

<style scoped>
.text {
  margin: 0;
  color: var(--bd-color-text-muted);
}
</style>

Size

The size prop sets the width for left and right, and the maximum height for top and bottom. It accepts any CSS length. Without size, the width is min(90vw, var(--bd-overlay-width)) (448 px by default), and the maximum height is 60vh.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer, BeeFlex } from "@thaisrr/beedesign";

const wide = ref(false);
const short = ref(false);
</script>

<template>
  <BeeFlex justify="flex-start" :gap="12" :responsive="false">
    <BeeButton variant="secondary" @click="wide = true">Wide panel</BeeButton>
    <BeeButton variant="secondary" @click="short = true">Short bottom panel</BeeButton>
  </BeeFlex>

  <BeeDrawer v-model:open="wide" title="Wide" size="min(90vw, 40rem)">
    <p class="text">Up to 40rem wide.</p>
  </BeeDrawer>

  <BeeDrawer v-model:open="short" title="Short" side="bottom" size="12rem">
    <p class="text">Up to 12rem tall, the content scrolls beyond that.</p>
  </BeeDrawer>
</template>

<style scoped>
.text {
  margin: 0;
  color: var(--bd-color-text-muted);
}
</style>

Hidden title

With hide-title, the title is no longer visible but is still announced by screen readers. It is useful for a navigation menu.

<script setup lang="ts">
import { ref } from "vue";
import { BeeButton, BeeDrawer } from "@thaisrr/beedesign";

const open = ref(false);
</script>

<template>
  <BeeButton variant="secondary" @click="open = true">Open the menu</BeeButton>

  <BeeDrawer v-model:open="open" side="left" title="Menu" hide-title>
    <nav aria-label="Main menu">
      <ul class="links">
        <li><a href="#" @click.prevent="open = false">Home</a></li>
        <li><a href="#" @click.prevent="open = false">Projects</a></li>
        <li><a href="#" @click.prevent="open = false">Contact</a></li>
      </ul>
    </nav>
  </BeeDrawer>
</template>

<style scoped>
.links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.links a {
  color: var(--bd-color-primary-dark);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.links a:hover {
  color: var(--bd-color-primary);
}
</style>

API

Props

Name	Type	Default	Description
title	string		Title and accessible name of the panel. Required.
open	boolean		Open state, to use with v-model:open. Required.
side	"left" | "right" | "top" | "bottom"	"right"	Edge the panel slides in from.
size	string		Width (left, right) or maximum height (top, bottom).
hideTitle	boolean	false	Hides the title visually, keeps it for screen readers.
closeLabel	string	"Close"	Accessible text of the close button.
returnFocusEl	HTMLElement | null	null	Element that gets the focus back on closing.
panelId	string	generated	Id of the panel, for an external aria-controls.

To localize it, pass the text of your language, for example close-label="Fermer".

Events

Name	Payload	Description
update:open	boolean	Emitted with false on click on the backdrop, on the close button, or on Escape.

Slots

Name	Description
default	Content of the panel.

CSS variables used

--bd-color-overlay, --bd-z-modal, --bd-color-surface, --bd-color-border, --bd-color-text, --bd-color-primary-light, --bd-color-primary-medium, --bd-color-primary-dark, --bd-color-focus, --bd-font-main, --bd-font-title, --bd-font-size-lg, --bd-radius-full, --bd-space-md, --bd-shadow-3, --bd-transition-fast, --bd-transition-base, --bd-border-width, --bd-close-size, --bd-overlay-width, --bd-focus-ring-width, --bd-focus-ring-offset.

Accessibility

• role="dialog" and aria-modal="true", named by its title.
• Focus moves to the close button on opening, and Tab and Shift+Tab loop inside the panel.
• Escape closes the panel, and focus is given back on closing.
• Page scrolling is locked while the panel is open.
• Transitions are disabled when prefers-reduced-motion is enabled.