Sidebar

Overview

Sidebar is a large composition, not a single primitive wrapper. ZitsSidebarProvider owns open/collapsed/mobile state (persisted to localStorage, toggled with Ctrl/Cmd+B) and cascades it to every other part. ZitsSidebar renders one of three shapes: a plain fixed-width column when Collapsible="none", a width-animated desktop rail, or, on a narrow viewport, an offcanvas sheet through NaviusDialog (focus trap, scroll lock, portal), the only point where this composition touches a Navius primitive. The remaining parts (ZitsSidebarHeader, Content, Footer, Group*, Menu*, Rail, Trigger, Input, Separator, Inset) are helm-native Tailwind slots keyed off the provider’s cascaded state via data-* attributes and CSS peer/group selectors, and some of them compose other Zits components (ZitsButton, ZitsInput, ZitsSeparator, ZitsSkeleton).

Install

navius add sidebar --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsSidebarProvider>
    <ZitsSidebar>
        <ZitsSidebarHeader>My App</ZitsSidebarHeader>
        <ZitsSidebarContent>
            <ZitsSidebarMenu>
                <ZitsSidebarMenuItem>
                    <ZitsSidebarMenuButton Href="/">Home</ZitsSidebarMenuButton>
                </ZitsSidebarMenuItem>
            </ZitsSidebarMenu>
        </ZitsSidebarContent>
    </ZitsSidebar>
    <ZitsSidebarInset>
        <ZitsSidebarTrigger />
    </ZitsSidebarInset>
</ZitsSidebarProvider>

Parts and props

ZitsSidebarProvider adds:

Prop	Type	Default	Description
Open	bool	true	Controlled desktop open state. Bind with @bind-Open.
DefaultOpen	bool	true	Uncontrolled initial desktop open state.
IsMobile	bool?	null	Forces the mobile/desktop choice; null auto-detects from the viewport width.
Collapsible	string	"offcanvas"	How the rail collapses: offcanvas, icon, none.
Width	string	"16rem"	Expanded sidebar width (CSS length).
WidthMobile	string	"18rem"	Mobile sheet width (CSS length).
WidthIcon	string	"3rem"	Collapsed (icon) sidebar width.

ZitsSidebar adds:

Prop	Type	Default	Description
Side	string	"left"	Which edge the sidebar sits on: left, right.
Variant	string	"sidebar"	Visual variant: sidebar, floating, inset.
Collapsible	string?	null	Overrides the provider’s collapse mode for this instance.

ZitsSidebarMenuButton adds:

Prop	Type	Default	Description
Href	string?	null	Renders an <a> instead of a <button> when set.
IsActive	bool	false	Marks the current item (data-active styling).
Variant	string	"default"	One of default, outline.
Size	string	"default"	One of default, sm, lg.
Tooltip	string?	null	Label surfaced as a native title when the rail is collapsed to icon-only on desktop.

ZitsSidebarTrigger and ZitsSidebarRail add no props beyond ChildContent/OnClick/ Attributes; both call the cascaded provider’s ToggleAsync(). The remaining parts (ZitsSidebarHeader, Content, Footer, Group, GroupLabel, GroupAction, GroupContent, Menu, MenuItem, MenuAction, MenuBadge, MenuSkeleton, MenuSub, MenuSubButton, MenuSubItem, Input, Separator, Inset) take no variant/size params of their own beyond ChildContent/Attributes pass-through.

Styling surface

Attributes on every part is merged with that part’s base class set via Cn.Class (or Cn.Merge where the part splats onto another Zits component), with the caller’s classes applied last.

Parameter	Values
Side (Sidebar)	left · right
Variant (Sidebar)	sidebar · floating · inset
Collapsible	offcanvas · icon · none
Variant (MenuButton)	default · outline
Size (MenuButton)	default · sm · lg

Data attribute hooks

Part	Attribute	Description
Wrapper	data-state	Mirrors the provider’s expanded/collapsed state, set by ZitsSidebarProvider.
Sidebar	data-state / data-collapsible / data-variant / data-side	Drive the width-animated rail and its icon/offcanvas collapse via group-data-* selectors, set by ZitsSidebar.
Popup (mobile)	data-mobile	Marks the offcanvas sheet content, set by ZitsSidebar, emitted alongside NaviusDialogPopup’s own data-open/data-closed.
MenuButton	data-active	Mirrors the IsActive prop, set by ZitsSidebarMenuButton.
MenuButton	data-size	Mirrors the Size prop, set by ZitsSidebarMenuButton.
Inset	reads peer-data-[variant] / peer-data-[state]	The inset’s floating-panel treatment keys off the sibling sidebar’s own data-variant/data-state via the peer selector; it sets no data attributes of its own.

Underlying primitives

• NaviusDialog