Sidebar

Collapsible app-shell sidebar modelled on shadcn's Sidebar. Renders as an <aside> with state driven by data-state attributes (expanded / collapsed). Companion JS behaviour toggles on Cmd/Ctrl+B shortcut and [data-mui="sidebar-trigger"] click. Brand-new v0.2.1 primitive with 20 subcomponent helpers.

Import

use maud_ui::primitives::sidebar::{self, Side, SidebarVariant, Collapsible, Props};

Example

use maud::html;
use maud_ui::primitives::sidebar;

html! {
    (sidebar::provider(html! {
        (sidebar::render(sidebar::Props {
            id: "main-sidebar".to_string(),
            side: sidebar::Side::Left,
            variant: sidebar::SidebarVariant::Sidebar,
            collapsible: sidebar::Collapsible::Icon,
            default_open: true,
            children: html! {
                (sidebar::header(html! {
                    div class="brand" { "My App" }
                }))
                (sidebar::content(html! {
                    (sidebar::group(html! {
                        (sidebar::group_label(html! { "Navigation" }))
                        (sidebar::group_content(html! {
                            (sidebar::menu(html! {
                                (sidebar::menu_item(
                                    sidebar::menu_button(html! {
                                        span { "Dashboard" }
                                    })
                                ))
                                (sidebar::menu_item(
                                    sidebar::menu_button(html! {
                                        span { "Settings" }
                                    })
                                ))
                            }))
                        }))
                    }))
                }))
                (sidebar::footer(html! {
                    span { "User" }
                }))
                (sidebar::rail())
            },
        }))
        (sidebar::inset(html! {
            div { "Main content here" }
        }))
    }))
}

Props

Enums

Side

SidebarVariant

Collapsible

Subcomponent Helpers (20 total)

Layout Containers

Group Helpers

Menu Helpers

Control Helpers

Accessibility

• Sidebar uses semantic <aside> with aria-label="Sidebar".
• data-state drives CSS animations and visibility; JS updates on collapse/expand.
• Groups and menu items use semantic <ul> / <li> lists.
• Keyboard shortcut: Cmd/Ctrl+B toggles the sidebar (via dist/behaviors/sidebar.js).
• Focus is managed within the sidebar when expanded; rail is tabindex="-1".
• Icons inside menu buttons marked aria-hidden="true" to avoid double announcement.

CSS Classes

Related

Navigation, NavMenu, Shell.

Shadcn reference

https://ui.shadcn.com/docs/components/base/sidebar