Components / Sidebar

Sidebar

A composable, collapsible app sidebar: about two dozen coordinated parts that make up a complete Sidebar system. The ZitsSidebarProvider owns the open/collapsed state, toggles on Ctrl/⌘ B, persists it to localStorage, collapses to an icon rail, and swaps to an off-canvas sheet on mobile.

Examples

A full app shell with Collapsible="icon": a header team-switcher, a labelled menu group (one row carries a badge, one a collapsible sub-menu), a user footer, the drag rail, and an inset holding the trigger. Click the trigger, drag the rail edge, or press Ctrl/⌘ B.

Toggle the rail with the trigger, the rail edge, or Ctrl / ⌘ B. It collapses to an icon rail and the open state persists to localStorage.

razor
<ZitsSidebarProvider DefaultOpen="true" Collapsible="icon">
    <ZitsSidebar Collapsible="icon">
        <ZitsSidebarHeader>
            <ZitsSidebarMenu>
                <ZitsSidebarMenuItem>
                    <ZitsSidebarMenuButton Size="lg" Tooltip="Acme Inc">Acme Inc</ZitsSidebarMenuButton>
                </ZitsSidebarMenuItem>
            </ZitsSidebarMenu>
        </ZitsSidebarHeader>

        <ZitsSidebarContent>
            <ZitsSidebarGroup>
                <ZitsSidebarGroupLabel>Platform</ZitsSidebarGroupLabel>
                <ZitsSidebarGroupContent>
                    <ZitsSidebarMenu>
                        <ZitsSidebarMenuItem>
                            <ZitsSidebarMenuButton Tooltip="Inbox" IsActive="true">
                                <span>Inbox</span>
                            </ZitsSidebarMenuButton>
                            <ZitsSidebarMenuBadge>5</ZitsSidebarMenuBadge>
                        </ZitsSidebarMenuItem>

                        <ZitsSidebarMenuItem>
                            <ZitsSidebarMenuButton Tooltip="Projects">
                                <span>Projects</span>
                            </ZitsSidebarMenuButton>
                            <ZitsSidebarMenuAction OnClick="ToggleProjects" aria-label="Toggle projects" />
                            <ZitsSidebarMenuSub>
                                <ZitsSidebarMenuSubItem>
                                    <ZitsSidebarMenuSubButton>Design Engineering</ZitsSidebarMenuSubButton>
                                </ZitsSidebarMenuSubItem>
                            </ZitsSidebarMenuSub>
                        </ZitsSidebarMenuItem>
                    </ZitsSidebarMenu>
                </ZitsSidebarGroupContent>
            </ZitsSidebarGroup>
        </ZitsSidebarContent>

        <ZitsSidebarFooter>
            <ZitsSidebarMenu>
                <ZitsSidebarMenuItem>
                    <ZitsSidebarMenuButton Size="lg" Tooltip="Lior">Lior</ZitsSidebarMenuButton>
                </ZitsSidebarMenuItem>
            </ZitsSidebarMenu>
        </ZitsSidebarFooter>

        <ZitsSidebarRail />
    </ZitsSidebar>

    <ZitsSidebarInset>
        <header class="flex h-12 items-center gap-2 border-b px-3">
            <ZitsSidebarTrigger />
        </header>
        <div class="p-4">Press Ctrl/⌘ B to toggle the rail.</div>
    </ZitsSidebarInset>
</ZitsSidebarProvider>

@code { private void ToggleProjects() { } }

Anatomy

Wrap the shell in the provider; compose the rail from header, content, and footer; fill a group's menu with items, each a button plus optional action, badge, and sub-menu.

razor
ZitsSidebarProvider                 (owns Open/collapsed + mobile state; Ctrl/Cmd+B; localStorage)
├── ZitsSidebar                     (Side · Variant · Collapsible="icon")
│   ├── ZitsSidebarHeader
│   ├── ZitsSidebarContent
│   │   └── ZitsSidebarGroup
│   │       ├── ZitsSidebarGroupLabel
│   │       └── ZitsSidebarGroupContent
│   │           └── ZitsSidebarMenu
│   │               └── ZitsSidebarMenuItem
│   │                   ├── ZitsSidebarMenuButton    (Href · IsActive · Tooltip)
│   │                   ├── ZitsSidebarMenuAction    (row action)
│   │                   ├── ZitsSidebarMenuBadge     (count)
│   │                   └── ZitsSidebarMenuSub
│   │                       └── ZitsSidebarMenuSubItem
│   │                           └── ZitsSidebarMenuSubButton
│   ├── ZitsSidebarFooter
│   └── ZitsSidebarRail             (drag / click edge to toggle)
└── ZitsSidebarInset                (your page; holds ZitsSidebarTrigger)

Installation

Terminal bash
navius add sidebar

API reference

ZitsSidebarProvider (root, owns state):

Prop Type Default
DefaultOpen bool true
Open / OpenChanged bool (@bind-Open) true
Collapsible string "offcanvas"
IsMobile bool? null (auto)
Width string "16rem"
WidthIcon string "3rem"
WidthMobile string "18rem"

ZitsSidebar (the rail shell):

Prop Type Default
Side string "left"
Variant string "sidebar"
Collapsible string? (provider's)

ZitsSidebarMenuButton (the interactive nav row):

Prop Type Default
Href string? -
IsActive bool false
Variant string "default"
Size string "default"
Tooltip string? -
OnClick EventCallback<MouseEventArgs> -

The remaining parts are layout wrappers taking ChildContent plus splatted attributes: ZitsSidebarHeader, ZitsSidebarContent, ZitsSidebarFooter, ZitsSidebarGroup / GroupLabel / GroupContent / GroupAction, ZitsSidebarMenu / MenuItem / MenuBadge / MenuAction / MenuSub / MenuSubItem / MenuSubButton / MenuSkeleton, ZitsSidebarInput and ZitsSidebarSeparator. ZitsSidebarRail, ZitsSidebarTrigger and ZitsSidebarInset read the provider; the rail and trigger toggle it.