Sub Navigation

Learn how to implement nested navigation for complex modules like Settings.

Interface parameters

Core configuration constants

Latest v2.0

Property	Definition	Direct implementation
Fixed width	`250px`	w-[250px]flex-shrink-0
Sticky behavior	`Top (80px)`	sticky top-20max-h-screen
Theme logic	`SSR-Safe`	mounted-hookresolvedTheme
Active pattern	`Exact`	pathname === hrefusePathname
Responsive		overflow-x-automd:flex-col

Sub-navigation interface

A consistent design pattern for deep-level configuration modules like Workspace Settings.

View Live Settings

Deep Dark

Crystal Light

Profile Settings

Appearance

Subscription

Team Members

Notifications

Profile Settings

Appearance

Subscription

Team Members

Notifications

Technical reference

Production ready sub-navigation structure

src/components/dashboard/settings/settings-sidebar.tsx

import { Building2, Palette, CreditCard } from "lucide-react"

const SettingsSidebar = () => {
  const pathname = usePathname();
  
  const subNavItems = [
    { icon: Building2, label: "Profile Settings", href: "/dashboard/settings" },
    { icon: Palette, label: "Appearance", href: "/dashboard/settings/appearance" },
    { icon: CreditCard, label: "Subscription", href: "/dashboard/settings/billing" }
  ];

  return (
    <aside className="w-64 sticky top-20 h-fit bg-white dark:bg-[#150a2e]">
      <nav className="flex flex-col gap-1 p-2">
        {subNavItems.map((item) => (
          <Link 
            key={item.href}
            href={item.href}
            className={cn(
               "flex items-center gap-3 px-4 py-3 rounded-xl",
               pathname === item.href ? "bg-purple-600 text-white" : "text-slate-500"
            )}
          >
            <item.icon className="w-4 h-4" />
            {item.label}
          </Link>
        ))}
      </nav>
    </aside>
  );
};

Context alignment

Sub-navigation bars are context-aware and align vertically on desktop, shifting to a horizontal scrollable strip on mobile devices.

Performance tip

Use the usePathname hook directly within the sub-nav component to ensure real-time active state updates without parent re-renders.