Overview
LeftNav provides hierarchical sidebar navigation with rich features including grouped sections, nested items, badges, tooltips, disabled states, external links, and action buttons. It's responsive with a hamburger menu on mobile.
Key Features
- Grouped navigation with section headers and separators
- Nested navigation with unlimited depth (expandable/collapsible)
- Badge variants (default, secondary, destructive, success, warning, info)
- Tooltips for disabled items and additional context
- External links (opens new tab) and action buttons (onClick)
- Collapsible mode (60px icon-only sidebar)
- Header with title, subtitle, and expandable details
- Footer for copyright, version info, help links
- localStorage persistence for collapsed states
- Mobile hamburger overlay with escape key support
Layout Availability
LeftNav is the sidebar navigation module for LayoutShell. It appears on the left side of the page on desktop and as a hamburger overlay on mobile.
LayoutShell
Primary sidebar navigation
LayoutForm
Not available in this layout
LayoutWizard
Not available in this layout
LayoutCard
Not available in this layout
LayoutBlank
Not available in this layout
Examples
Flat Navigation
Simple list of navigation items without grouping.
Grouped Navigation
Navigation organized into labeled sections with separators.
Nested Navigation
Expandable/collapsible sub-navigation for hierarchical content.
Badge Variants
Six badge color variants for different statuses.
Disabled & Tooltip States
Disabled items with explanatory tooltips.
External Links & Actions
External links open in new tabs. Action buttons trigger onClick without navigation.
Footer Actions
Footer section with user actions.
With ScopeJump (includes ScopeViewToggle)
ScopeViewToggle shows by default when scopeJump is enabled. Hub/Timeline/Dashboard toggle with scope-aware tooltips.
With Active Hub View
Configure activeView to show which view is currently selected.
With Primary Action
Role-gated action button below ScopeViewToggle. Auto-computes in LayoutShell based on scope (Program → New Project, Project → New Resource).
Usage
Flat Navigation
import { LeftNav, type NavItem } from '@/ui/layouts';
const navItems: NavItem[] = [
{ href: '/dashboard', icon: faHouse, label: 'Dashboard', active: true },
{ href: '/projects', icon: faFolder, label: 'Projects', badge: 12 },
{ href: '/settings', icon: faGear, label: 'Settings' },
];
<LeftNav items={navItems} />Grouped Navigation
import { LeftNav, type NavGroup } from '@/ui/layouts';
const navGroups: NavGroup[] = [
{
label: 'Workspace',
items: [
{ href: '/dashboard', icon: faHouse, label: 'Dashboard', active: true },
{ href: '/projects', icon: faFolder, label: 'Projects', badge: 12 },
]
},
{
label: 'Settings',
items: [
{ href: '/settings', icon: faGear, label: 'Settings' },
{ href: '/account', icon: faUser, label: 'Account' },
]
}
];
<LeftNav groups={navGroups} />Footer Actions
import { LeftNav, type NavGroup } from '@/ui/layouts';
const footer = {
content: <p>© 2025 Centercode</p>,
};
<LeftNav
groups={navGroups}
scopeJump={true}
footer={footer}
collapsible={true}
/>