Sidebar Nav

Workspace navigation with quick search.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { SidebarNav, type SidebarNavItem } from "@aile.sh/elia";

const items: SidebarNavItem[] = [
  { key: "activity", label: "Overview", section: "General" },
  { key: "tasks", label: "Reviews", section: "General", count: 7 },
  { key: "dashboard", label: "Reports", section: "General" },
  { key: "spaces", label: "Projects", section: "Library", plus: true },
  { key: "analytics", label: "Metrics", section: "Library" },
];

export function Example() {
  return (
    <SidebarNav
      workspace={{ initial: "N", name: "Northwind", sub: "Design Team" }}
      items={items}
      actionLabel="New review"
      onSelect={(key) => console.log("navigate to", key)}
      onAction={() => console.log("create review")}
      onItemAdd={(key) => console.log("add inside", key)}
    />
  );
}

— elia design system · MIT · primitives · https://github.com/aile-sh/elia