Sidebar navigation

Vertical sidebar nav with active/inactive states, optional heroicons, and optional badge counts.

Preview

React preview

LiveView (HEEx)

alias DesignSystem.UI.SidebarNavigation

<SidebarNavigation.sidebar items={[
  %{label: "Dashboard", href: "/", active: true, icon: "hero-home"},
  %{label: "Team", href: "/team", icon: "hero-users"}
]} />

React (JSX)

import { SidebarNavigation } from "../ui/index.mjs"

<SidebarNavigation
  items={[
    { label: "Dashboard", href: "/", active: true },
    { label: "Team", href: "/team" },
  ]}
/>