Sidebar

Main navigation. Always visible when its app container is wide; an off-canvas drawer under 900 px of container width, inert while closed so it is not reachable by keyboard. Render it inside AppShell: the container decides, never the viewport. Without an AppShell it measures its parent element instead.

Import

import { Sidebar } from "@jcsoftdev/ui/shell";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/shell/sidebar.

Usage

<Sidebar
  groups={groups}
  ariaLabel="Navegación principal"
  header={header}
  footer={footer}
  open={false}
/>

Props

Prop	Type	Default	Description
groups *	SidebarGroup[]
ariaLabel *	string		Accessible name of the sidebar landmark.
header	ReactNode		Brand block shown at the top.
footer	ReactNode		Block pinned to the bottom (e.g. the current user).
renderLink	SidebarRenderLink	defaultRenderLink	Link renderer; defaults to a plain anchor.
open	boolean	false	Drawer state when the app container is under 900 px. Ignored above it, where the sidebar is always visible.
onClose	(() => void)
className	string

* marks a required prop.

Storybook stories

• Default
• Without Header And Footer
• Custom Link
• Mobile Drawer

Source

packages/ui/src/shell/sidebar/sidebar.tsx