Navigation Components
Navigation components help users move through the application and access different sections of content.
Tabs
Tabs organize content into separate views where only one view can be visible at a time.
Tab 1 content
<Tabs defaultValue="tab1" className="w-full">
<TabsList className="rounded-2xl">
<TabsTrigger value="tab1">Tab 1</TabsTrigger>
<TabsTrigger value="tab2">Tab 2</TabsTrigger>
<TabsTrigger value="tab3">Tab 3</TabsTrigger>
</TabsList>
<TabsContent value="tab1" className="p-4">
Tab 1 content
</TabsContent>
<TabsContent value="tab2" className="p-4">
Tab 2 content
</TabsContent>
<TabsContent value="tab3" className="p-4">
Tab 3 content
</TabsContent>
</Tabs>Breadcrumbs
Breadcrumbs show the user's location in the site hierarchy and help them navigate back.
<div className="flex items-center space-x-1 text-sm">
<Link href="/" className="text-muted-foreground hover:text-[#4B83FF]">Home</Link>
<span className="text-muted-foreground">/</span>
<Link href="/components" className="text-muted-foreground hover:text-[#4B83FF]">Components</Link>
<span className="text-muted-foreground">/</span>
<span>Navigation</span>
</div>