[ [LC.01] Components ] Navigation

Navigation

> Responsive navigation component with terminal-style branding, desktop links, and mobile sheet menu.

Preview

[ [0x00] NAVIGATION ]

1import { Navigation } from "@/components/marketing/navigation";
2
3export default function LandingPage() {
4  return (
5    <div>
6      <Navigation />
7      {/* Page content */}
8    </div>
9  );
10}

Variants

[ [0x00] MOBILE MENU OPEN ]

[SYSTEM MENU]

[NAVIGATE]:> FEATURES > PRICING > DOCS > FAQ

1<Sheet>
2  <SheetTrigger asChild>
3    <Button variant="ghost" size="icon" aria-label="Open navigation menu">
4      <Menu className="h-5 w-5" />
5    </Button>
6  </SheetTrigger>
7  <SheetContent side="right">
8    <nav className="flex flex-col gap-4">
9      <Link href="#features">FEATURES</Link>
10      <Link href="#pricing">PRICING</Link>
11      <Link href="/docs">DOCS</Link>
12    </nav>
13  </SheetContent>
14</Sheet>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
navLinks	`{ label: string; href: string }[]`	`Built-in links`	Array of navigation links to display

Accessibility

[ [0x58] A11Y ]

Mobile menu button has aria-label for screen readers
Sheet has proper focus management when opened
All links are keyboard accessible
Skip to content link available for keyboard users

Variants

[ [0x00] MOBILE MENU OPEN ]

[SYSTEM MENU]

[NAVIGATE]:> FEATURES > PRICING > DOCS > FAQ

1<Sheet>
2  <SheetTrigger asChild>
3    <Button variant="ghost" size="icon" aria-label="Open navigation menu">
4      <Menu className="h-5 w-5" />
5    </Button>
6  </SheetTrigger>
7  <SheetContent side="right">
8    <nav className="flex flex-col gap-4">
9      <Link href="#features">FEATURES</Link>
10      <Link href="#pricing">PRICING</Link>
11      <Link href="/docs">DOCS</Link>
12    </nav>
13  </SheetContent>
14</Sheet>

Prop

Type

Default

Description

navLinks

{ label: string; href: string }[]

Built-in links

Array of navigation links to display