The Nested Tabs (Multi-Level Tabs) component introduces a structured way to organize complex content within your application. Unlike traditional flat tabs, it supports hierarchical navigation where each main tab can reveal its own set of sub-tabs, allowing users to dive deeper into related sections without overwhelming the interface. Smooth animations ensure that transitions between parent and child tabs feel natural and engaging. This makes it ideal for dashboards, documentation portals, and settings panels, where users often need to navigate across multiple categories and subcategories. With built-in support for both light and dark themes, the component adapts seamlessly to modern UI designs while keeping content neatly organized and highly accessible.
import NestedTabs, { NestedTabItem } from "@/components/ui/nested-tabs";
const demoItems: NestedTabItem[] = [
{
value: "dashboard",
label: "Dashboard",
content: "Main Dashboard Overview",
subTabs: [
{ value: "dash-stats", label: "Stats", content: "Detailed statistics and metrics." },
{ value: "dash-reports", label: "Reports", content: "Reports and exports section." },
],
},
{
value: "settings",
label: "Settings",
content: "General settings content",
subTabs: [
{ value: "profile", label: "Profile", content: " Manage your profile details." },
{ value: "account", label: "Account", content: "Account-related preferences." },
{ value: "security", label: "Security", content: "Security and password settings." },
],
},
{
value: "docs",
label: "Documentation",
content: "Developer documentation content",
subTabs: [
{ value: "api", label: "API", content: "API reference with endpoints." },
{ value: "guides", label: "Guides", content: "Step-by-step guides and tutorials." },
],
},
];
export default function DemoOne() {
return <NestedTabs items={demoItems} defaultValue="dashboard" />;
}
Part of Ruixen UI — browse the full library on 21st.dev.