Navigation

Components for navigating between pages and sections.

Tabs

Organize content into switchable panels

Manage your account settings and preferences.

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account content</TabsContent>
  <TabsContent value="password">Password content</TabsContent>
</Tabs>

Dropdown Menu

Contextual menu triggered by button

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button>Open Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Breadcrumbs

Show navigation hierarchy

<nav className="flex items-center gap-2 text-sm">
  <a href="#">Home</a>
  <span>/</span>
  <a href="#">Products</a>
  <span>/</span>
  <span>Current Page</span>
</nav>

Button Group

Group related actions together

<div className="inline-flex rounded-md shadow-sm">
  <Button variant="outline" className="rounded-r-none">Left</Button>
  <Button variant="outline" className="rounded-none border-x-0">Center</Button>
  <Button variant="outline" className="rounded-l-none">Right</Button>
</div>