Components
A production-ready navigation layout that combines a collapsible sidebar with a robust, browser-style tab system. Designed for complex dashboards where users need to multitask and maintain context across different views.
Features 📑 Chrome-like Tab System: Fully functional tab interface with support for dynamic creation, deletion, and reordering (state logic). 🖱️ Power User Context Menus: Right-click tabs to access advanced actions: Close Other Tabs Close Tabs to the Right Close Tabs to the Left 💾 State Persistence: Automatically saves open tabs and the active selection to localStorage, restoring the user's session instantly active refreshing. ✨ Fluid Animations: Built with Framer Motion for smooth layout transitions, collapsible sidebar effects (spring physics), and "magic move" active state indicators. 📱 Fully Responsive: Collapsible desktop sidebar (expands/contracts). Native-feeling mobile drawer (Sheet). Horizontal scrollable tab bar on mobile. ⌨️ Keyboard & Accessibility: built on accessible primitives (Radix UI / shadcn/ui).
Loading preview...
'use client';
import * as React from 'react';
import { Home, FileText, Settings, Users, LayoutGrid } from 'lucide-react';
import { SidebarWithTabs, NavItem } from '@/components/ui/sidebar-with-chrome-like-tabs';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
const navItems: NavItem[] = [
{ id: 'dashboard', label: 'Dashboard', icon: Home },
{ id: 'documents', label: 'Documents', icon: FileText },
{ id: 'team', label: 'Team', icon: Users },
{ id: 'projects', label: 'Projects', icon: LayoutGrid },
{ id: 'settings', label: 'Settings', icon: Settings },
];
function DashboardContent() {
return (
<div className='p-6'>
<h1 className='text-xl font-semibold text-stone-800 dark:text-stone-100'>
Dashboard
</h1>
<p className='text-stone-500 dark:text-stone-400 mt-1'>
Welcome to your dashboard
</p>
</div>
);
}
function DocumentsContent() {
return (
<div className='p-6'>
<h1 className='text-xl font-semibold text-stone-800 dark:text-stone-100'>
Documents
</h1>
<p className='text-stone-500 dark:text-stone-400 mt-1'>
Manage your documents
</p>
</div>
);
}
function TeamContent() {
return (
<div className='p-6'>
<h1 className='text-xl font-semibold text-stone-800 dark:text-stone-100'>
Team
</h1>
<p className='text-stone-500 dark:text-stone-400 mt-1'>
Manage your team members
</p>
</div>
);
}
function ProjectsContent() {
return (
<div className='p-6'>
<h1 className='text-xl font-semibold text-stone-800 dark:text-stone-100'>
Projects
</h1>
<p className='text-stone-500 dark:text-stone-400 mt-1'>
Manage your projects
</p>
</div>
);
}
function SettingsContent() {
return (
<div className='p-6'>
<h1 className='text-xl font-semibold text-stone-800 dark:text-stone-100'>
Settings
</h1>
<p className='text-stone-500 dark:text-stone-400 mt-1'>
Manage your settings
</p>
</div>
);
}
const contentMap: Record<string, React.ReactNode> = {
dashboard: <DashboardContent />,
documents: <DocumentsContent />,
team: <TeamContent />,
projects: <ProjectsContent />,
settings: <SettingsContent />,
};
export default function HomePage() {
const renderContent = (navId: string) => {
return contentMap[navId] || <DashboardContent />;
};
return (
<SidebarWithTabs
companyName='Acme Inc'
navItems={navItems}
renderContent={renderContent}
defaultNavId='dashboard'
footer={
<div className='flex items-center gap-3 px-3 py-2 rounded-lg bg-sidebar-accent w-full'>
<Avatar>
<AvatarImage
src='https://blogs-images.forbes.com/olliebarder/files/2017/10/goku_ultra_instinct.jpg'
alt='@Arunachalam0606'
className='object-cover'
/>
<AvatarFallback>UA</AvatarFallback>
</Avatar>
<div className='min-w-0 flex-1 overflow-hidden'>
<p className='text-xs font-medium text-sidebar-foreground truncate whitespace-nowrap'>
User Account
</p>
<p className='text-[10px] text-muted-foreground truncate whitespace-nowrap'>
Pro Plan
</p>
</div>
</div>
}
/>
);
}