maud-ui64 components

Drawer

Right (default)

Settings

Adjust your preferences here.

Choose your preferred appearance.

Left (navigation)

Navigation

Bottom (sheet with grab handle)

Share

Share this document with others.

Enter the recipient's email.

Scaled background (Vaul-style)

Confirm action

The page behind scales down while this drawer is open.

Renders with data-scale-background="true" on the dialog root. Pair with a small script that toggles body[data-drawer-scaling] to get the Vaul scale-down effect.

No close button (footer-only dismiss)

Terms of service

You must choose an action below to dismiss this drawer.

The built-in × close button is hidden when show_close_button is false. The footer actions are the only way out.

Drawer

Sliding panel that anchors to a screen edge using native <dialog> element. Supports all sides, background scaling (Vaul-style), and grab handles.

Import

use maud_ui::primitives::drawer::{self, Props, Side};

Example

use maud::html;
use maud_ui::primitives::drawer;

html! {
    (drawer::trigger("demo-drawer", "Open Drawer"))
    (drawer::render(drawer::Props {
        id: "demo-drawer".to_string(),
        title: "Settings".to_string(),
        description: Some("Adjust your preferences.".to_string()),
        children: html! { p { "Settings content here" } },
        side: drawer::Side::Right,
        show_close_button: true,
        should_scale_background: false,
        ..Default::default()
    }))
}

Props

FieldTypeDefaultDescription
idString"drawer"Unique identifier (used by trigger to open)
titleString"Drawer"Drawer title/heading
descriptionOption<String>NoneOptional description below title
childrenMarkup—Body content
footerOption<Markup>NoneOptional footer markup pinned at bottom
sideSideSide::RightWhich side the drawer slides from
should_scale_backgroundboolfalseWhether page background scales down when open (Vaul pattern). Emits data-scale-background="true"
show_close_buttonbooltrueWhether to render × close button in header

Side Enum

VariantCSS ClassDescription
Leftmui-drawer--leftSlides from left edge
Rightmui-drawer--rightSlides from right edge (default)
Topmui-drawer--topSlides from top; renders grab handle
Bottommui-drawer--bottomSlides from bottom; renders grab handle

Helper Functions

trigger(target_id, label) → Markup

Renders a button with data-mui="drawer-trigger" and data-target attributes.

close_button(label) → Markup

Renders a × close button with data-mui-close attribute. Positioned absolute in header via CSS.

Features

  • Side anchoring: Slides from any edge; top/bottom variants include a grab handle
  • Background scaling: When should_scale_background: true, emits data-scale-background="true" on root. Pair with CSS/JS that toggles body[data-drawer-scaling] for Vaul-style scale effect
  • Native <dialog>: Uses browser modal behavior; ESC and backdrop click close
  • ARIA attributes: aria-modal="true", aria-labelledby, aria-describedby

Accessibility

  • Drawer has aria-modal="true"
  • Title and description linked via ARIA
  • Close button has aria-label="Close"
  • Grab handle (top/bottom) is decorative; no interactive role needed

Related

  • Dialog
  • Collapsible
  • Sheet

Shadcn reference

https://ui.shadcn.com/docs/components/drawer

← Back to Gallery