Navigation

Wayfinding uses shared layout components from @/components. The sidebar is built with Menu, MenuGroup, and MenuItem. Profile sections use badge-style tabs.

<MenuGroup label="Components">
  <MenuItem href="/design-system/button">Button</MenuItem>
  <MenuItem href="/design-system/navigation">Navigation</MenuItem>
</MenuGroup>

Page navigation

Headers, breadcrumbs, and back links for wayfinding inside pages.

Club members

Registry and license status overview.

<header>
  <h1>Club members</h1>
  <p>Registry and license status overview.</p>
  <MenuButton />
</header>

Back to members

<Link href="/admin/club-members">
  <ArrowLeft />
  Back to members
</Link>

<nav>
  <Link href="#">Club members</Link>
  <ChevronRight />
  <span>Alexandru Popescu</span>
</nav>

Section navigation

In-page tabs for profile sections and detail views.

OverviewLicensePerformanceDocuments

Badge tabs

<Badge variant="tag">Overview</Badge>
<Badge variant="tag-outline">License</Badge>
<Badge variant="tag-outline">Performance</Badge>

Underline tabs

<div className="flex gap-4 border-b">
  <button className="border-b-2 border-primary">Overview</button>
  <button className="text-slate-500">Documents</button>
</div>