Sidebar

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" }
        }))
    }))
}

Enums

Side

SidebarVariant

Surface

Collapsible

Subcomponent Helpers (20 total)

Layout Containers

Group Helpers

Menu Helpers

Current-row variants (CurrentVariant)

Control Helpers

CSS Classes

Related

Navigation, NavMenu, Shell.

Shadcn reference

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

Persistent groups and navigation links (0.9)

Use collapsible_group("workspace-group", "Workspace", menu_markup, true) for native details/summary with remembered state. IDs must be stable and unique. menu_link("/reservations", "Reservations", Some(icon), true) renders a labelled current-page link with a 16px icon slot; None uses a letter fallback. Nest rows using menu_sub(...) for indentation without a decorative rail. Header and footer helpers accept arbitrary markup.

Icon collapse is available at 64rem and above. Below 60rem, the behavior moves the same sidebar node into its sibling native dialog and restores it on close or desktop resize. The provider shows the toggle after enhancement; without JS, navigation stays visible. Cmd/Ctrl+B targets the focused provider. Use one trigger per sidebar with the matching ID, and use menu_link for destinations so full names survive icon-only display. The behavior source is static/behaviors/sidebar.js; two rail click handlers from 0.8 have been consolidated into one.

Frame contract (0.12.0)

Density never moves the frame. Shell spacing, type and control heights use independent --mui-shell-* tokens. See shell frame for layout, current navigation and source migration details.