Blocks

Sidebar

Dashboard side navigation.

Click items to move the active pill, then press the chevron at the bottom — the rail narrows to icons and labels fade out, with tooltips taking over.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add sidebar

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { Sidebar } from "@lumora/ui/blocks/sidebar";
// or from the barrel:
import { Sidebar } from "@lumora/ui";

Props worth knowing

sections group items ({ id, label, icon, href? or onClick?, badge? }); works controlled via activeId/collapsed or uncontrolled with the demo defaults. The bottom toggle collapses the rail to icons with tooltips; onItemSelect receives the pressed item. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.