Sidebar

A composable, themeable, and customizable sidebar component.

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::Sidebar::*;

#[component]
pub fn SidebarAnatomy() -> impl IntoView {
    view! {
        <SidebarProvider>
            <Sidebar>
                <SidebarHeader />
                <SidebarContent>
                    <SidebarGroup>
                        <SidebarGroupLabel />
                        <SidebarGroupContent>
                            <SidebarMenu>
                                <SidebarMenuItem>
                                    <SidebarMenuButton />
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <Collapsible>
                                        <CollapsibleTrigger slot>
                                            <SidebarMenuButton />
                                        </CollapsibleTrigger>
                                        <CollapsibleContent>
                                            <SidebarMenuSub>
                                                <SidebarMenuSubItem />
                                            </SidebarMenuSub>
                                        </CollapsibleContent>
                                    </Collapsible>
                                </SidebarMenuItem>
                            </SidebarMenu>
                        </SidebarGroupContent>
                    </SidebarGroup>
                </SidebarContent>
                <SidebarFooter />
            </Sidebar>
            <main>
                <SidebarTrigger />
            </main>
        </SidebarProvider>
    }
}

API Reference

Collapsible

Creates a collapsible menu.

Implements global and details attributes.

CollapsibleContent

Creates a collapsible menu.

Implements global attributes.

Sidebar

The sidebar container.

Implements global attributes.

SidebarContent

A scrollable wrapper displayed in the middle of the sidebar.

Implements global attributes.

SidebarFooter

A sticky footer displayed at the bottom of the sidebar.

Implements global attributes.

SidebarGroup

Creates a section in the content area of the sidebar that groups similar items.

Implements global attributes.

SidebarGroupContent

Wraps the content of a sidebar group.

SidebarGroupLabel

The label displayed above the group.

Implements global attributes.

SidebarHeader

A sticky header displayed at the top of the sidebar.

Implements global attributes.

SidebarMenu

For building a menu within a SidebarGroup.

Implements global attributes.

SidebarMenuButton

Wraps content displayed in the click area of a SidebarMenuItem.

SidebarMenuItem

Contains an element within the SidebarMenu.

Implements global and li attributes.

SidebarProvider

Takes in initial state and provides SidebarContext to its children.

Custom Attributes
Name	Type	Default	Description
hidden	Reactive<bool>	false	Reactive signal coupled to the sidebar's hidden state.
side	Reactive<String>	"left"	Reactive signal coupled to which side of its container the sidebar renders on.

SidebarMenuSub

Wraps a submenu within a SidebarMenu.

SidebarMenuSubItem

A menu item within the SidebarMenuSub menu.

Implements global and li attributes.

SidebarTrigger

Wrapper that toggles showing/hiding of the sidebar.

Implements global attributes.