Drawer

Sidebar component that can be toggled open/closed

Drawer Structure and Functionality
.drawer // The root container
  ├── .drawer-toggle // Hidden checkbox
  ├── .drawer-content // Page content
  │    ╰── // navbar, content, footer
  ╰── .drawer-side // Sidebar wrapper
       ├── .drawer-overlay // Dark overlay
       ╰── // Sidebar content
Key Features:

Responsive visibility with lg:drawer-open classes

Toggle via JavaScript or label clicks

Scrollbar-gutter management by default

Drawer adds scrollbar-gutter by default to prevent layout shift. To disable:
@plugin "daisyui" { exclude: rootscrollgutter; } at the top of your CSS file

Usage

Basic Drawer

Preview Code Auto

Open drawer

Div(
    Input(id='my-drawer-1', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-1', cls='btn btn-primary drawer-button'),
        cls='drawer-content'
    ),
    Div(
        Label(fr='my-drawer-1', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(A('Sidebar Item 1')),
            Li(A('Sidebar Item 2')),
            cls='menu p-4 w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'
    ),
    cls='drawer h-56'
)

Responsive Drawer

Persistent sidebar on large screens, collapses on small screens

Preview Code Auto

Open drawer

Div(
    Input(id='my-drawer-2', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-2', cls='btn btn-primary drawer-button lg:hidden'),
        cls='drawer-content flex flex-col items-center justify-center'
    ),
    Div(
        Label(fr='my-drawer-2', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(A('Sidebar Item 1')),
            Li(A('Sidebar Item 2')),
            cls='menu p-4 w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'
    ),
    cls='drawer h-56 lg:drawer-open'
)

Change screen size to see the responsive behavior

Preview Code Auto

Navbar Title

Content

Div(
    Input(id='my-drawer-3', type='checkbox', cls='drawer-toggle'),
    Div(
        Div(
            Div(
                Label(
                    Icon.menu_bars(f"{Size.MD}"),
                    fr='my-drawer-3',
                    aria_label='open sidebar',
                    cls='btn btn-square btn-ghost'
                ),
                cls='flex-none lg:hidden'
            ),
            Div('Navbar Title', cls='flex-1 px-2 mx-2'),
            Div(
                Ul(
                    Li(Button('Navbar Item 1')),
                    Li(Button('Navbar Item 2')),
                    cls='menu menu-horizontal'
                ),
                cls='flex-none hidden lg:block'
            ),
            cls='w-full navbar bg-base-300'
        ),
        Div('Content', cls='flex justify-center items-center flex-grow'),
        cls='flex flex-col drawer-content'
    ),
    Div(
        Label(fr='my-drawer-3', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(Button('Sidebar Item 1')),
            Li(Button('Sidebar Item 2')),
            cls='p-4 menu w-60 md:w-80 min-h-full bg-base-200'
        ),
        cls='drawer-side'
    ),
    cls='drawer h-56'
)

Right-aligned Drawer

Preview Code Auto

Open drawer

Div(
    Input(id='my-drawer-4', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-4', cls='btn btn-primary drawer-button'),
        cls='drawer-content flex flex-col items-center justify-center'
    ),
    Div(
        Label(fr='my-drawer-4', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(Button('Sidebar Item 1')),
            Li(Button('Sidebar Item 2')),
            cls='menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'
    ),
    cls='drawer drawer-end'
)

Class Reference

Class	Type	Description
drawer	Component	Base container
drawer-toggle	Part	Checkbox to control drawer state
drawer-content	Part	Main content area
drawer-side	Part	Sidebar container
drawer-overlay	Part	Clickable overlay behind drawer
drawer-end	Placement	Aligns drawer to right side
drawer-open	Modifier	Forces the drawer to be open

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo

Drawer

Drawer Structure and Functionality

Key Features:

Usage

Basic Drawer

Responsive Drawer

Responsive Navbar Integration

Right-aligned Drawer

Class Reference