Component

Sidebar

Vertical nav panel with labeled sections, icons, badges, and active/disabled items. The active item uses the solid default color.

Sections, icons, and badges

Active items use bg-fuji-default text-fuji-default-foreground: black on white in light, white on dark in dark
Renders a navigation landmark named "Sidebar" (override with aria-label); each Section ties its label to its items as a named group
active sets aria-current="page" as well as the styling. Sidebar.Item renders an anchor - pass as={Link} for a router link

Also accepts everything from React.HTMLAttributes<HTMLElement>.

Prop	Type	Default	Description
active	boolean	None	Marks the current page; sets `aria-current="page"` as well as the active styling.
as	React.ElementType<any, keyof react_jsx_runtime.JSX.IntrinsicElements>	"a"	The element to render instead of an anchor - a router `Link`, typically.
icon	React.ReactNode	None	Glyph before the label.

activeNone

boolean

Marks the current page; sets `aria-current="page"` as well as the active styling.

as"a"

React.ElementType<any, keyof react_jsx_runtime.JSX.IntrinsicElements>

The element to render instead of an anchor - a router `Link`, typically.

iconNone

React.ReactNode

Glyph before the label.

Also accepts everything from React.AnchorHTMLAttributes<HTMLAnchorElement>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent