Drawer

Use bo-drawer for navigation, details, or actions that can remain in a side panel.

Usage

<bo-button @click="open = true">Open drawer</bo-button>
<bo-drawer v-model:open="open" title="Project details" description="Review the current project.">
  <p>Drawer body content.</p>
  <template #footer>
    <bo-button @click="open = false">Done</bo-button>
  </template>
</bo-drawer>

Shared Drawer State

Use useDrawer when a drawer needs to be opened from a component that does not own its template. Mount bo-drawer-viewport once in the application shell.

const { show, clear } = useDrawer();
show({ side: 'right', title: 'Managed drawer', description: 'Opened from any component.' });
clear();
 
<bo-drawer-viewport />

Side and size

Use side="left" for navigation and size="sm", lg, or full for the panel width.

<bo-drawer v-model:open="leftOpen" side="left" size="sm" title="Navigation">
  <p>Navigation links.</p>
</bo-drawer>

API

Prop / event / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Panel attributes.
open	boolean	false	Visibility used by v-model:open.
side	left | right	right	Panel side.
size	sm | default | lg | full	default	Panel width.
title / description	string	-	Generated header and body content.
closeOnBackdrop / closeOnEscape	boolean	true	Close behavior.
showClose / closeAriaLabel	boolean / string	true / Close	Close button settings.
role / ariaLabel / ariaLabelledBy / ariaDescribedBy	native accessibility types	dialog / -	Panel semantics.
update:open	event	-	Emitted when the panel state changes.
close	event	-	Emitted when the drawer requests closing.
default / header / footer	slot	-	Body, header, and footer content.