Drawer

DaisyUI

Drawers provide responsive side navigation panels that can slide in from the edge of the viewport.

Basic Drawer

Click the button to open the drawer sidebar.

Open Drawer

Main content area. Click the button to open the drawer.

Navbar + Drawer

Desktop shows navbar menu, mobile shows drawer sidebar.

Content

Responsive Always Open

Sidebar always visible on large screens, toggleable on small screens.

This drawer is always open on large screens.

Drawer End (Right)

Drawer opens from the right side.

Open Right

Main content area. Click the button to open the drawer from right.

Code Example

use rsxui::components::{

    Drawer, DrawerToggle, DrawerContent, DrawerSide,

    DrawerOverlay, DrawerButton, Menu, MenuItem,

};

use rsx_macros::rsx;

let html = rsx! {

    <Drawer id="my-drawer">

        <DrawerToggle id="my-drawer" />

        <DrawerContent>

            <DrawerButton for_id="my-drawer" />

            <p>"Content"</p>

        </DrawerContent>

        <DrawerSide>

            <DrawerOverlay for_id="my-drawer" />

            <Menu class="p-4 w-80 min-h-full bg-base-200">

                <MenuItem>"Item 1"</MenuItem>

                <MenuItem>"Item 2"</MenuItem>

            </Menu>

        </DrawerSide>

    </Drawer>

};

RsxUI

DaisyUI Components for Rust

Created by Isak Rickyanto@2026