A collapsible application sidebar built from a small set of composable parts.
sidebar_provider/1 is a flex wrapper that owns the open/closed state via a
data-state attribute ("expanded" / "collapsed") and carries the
ShadixSidebar hook (assets/ts/sidebar.ts). It also gets a Tailwind group
marker (group/sidebar) so descendant elements can react to the state purely
in CSS via group-data-[state=collapsed]/sidebar:* variants. The provider
holds both the sidebar/1 and the main content.
sidebar_trigger/1 is a button carrying data-slot="sidebar-trigger"; the
hook listens for clicks on any such trigger inside the provider and flips the
provider's data-state. The CSS reacts: sidebar/1 is an <aside> that
animates its width between w-64 (expanded) and w-0/overflow-hidden
(collapsed). No server round-trip is involved — toggling is entirely
client-side.
The remaining parts (sidebar_header/1, sidebar_content/1,
sidebar_footer/1, sidebar_group/1, sidebar_group_label/1,
sidebar_menu/1, sidebar_menu_item/1, sidebar_menu_button/1) are
layout/structure primitives styled with the --sidebar* theme tokens
(bg-sidebar, text-sidebar-foreground, bg-sidebar-accent, …).
Simplifications (vs. shadcn's Sidebar)
shadcn's Sidebar is a large system; this is a focused v1. Intentionally omitted:
- No mobile off-canvas sheet. There is no
Sheet-based mobile variant; the sidebar collapses in place on every viewport. - No rail. There is no draggable/clickable rail handle along the edge.
- No cookie persistence. Open state is not persisted to a cookie (or to the server); it resets on reload.
- No keyboard shortcut. There is no global
⌘B/Ctrl+Btoggle; only the trigger button toggles the sidebar. - No
side/variant/collapsiblemodes. The sidebar is always on the left, always the "sidebar" variant, and always collapses to zero width (no "icon" collapse mode). - No
useSidebarcontext. State lives in a DOMdata-stateattribute, not a shared context object;sidebar_menu_button/1does not auto-render tooltips when collapsed.
Summary
Functions
The sidebar surface: an <aside> whose width animates with the provider state.
The scrollable main content region of the sidebar.
The sidebar footer region (bottom of the sidebar).
A logical group of menu items within the sidebar content.
A non-interactive label for a sidebar_group/1.
The sidebar header region (top of the sidebar).
The menu list (ul) holding sidebar_menu_item/1s.
A styled menu entry.
A menu list item (li).
The flex wrapper that owns sidebar open/closed state.
The toggle button. Clicking it flips the provider's data-state.
Functions
The sidebar surface: an <aside> whose width animates with the provider state.
Expanded is w-64; collapsed is w-0 with overflow-hidden, driven by the
provider's data-state via the group/sidebar marker.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The scrollable main content region of the sidebar.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
A logical group of menu items within the sidebar content.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
A non-interactive label for a sidebar_group/1.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The sidebar header region (top of the sidebar).
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The flex wrapper that owns sidebar open/closed state.
Renders a div with data-slot="sidebar-provider", the ShadixSidebar hook,
and data-state (defaults to "expanded"). Place a sidebar/1 and the main
content inside its :inner_block.
Attributes
id(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
The toggle button. Clicking it flips the provider's data-state.
Carries data-slot="sidebar-trigger"; the ShadixSidebar hook reacts to the
click. Renders a panel icon by default; override via the :inner_block slot.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block