CentercodeDitto
DittoPorygonAPI

LeftNav

Sidebar navigation with groups, nesting, badges, tooltips, and collapsible mode

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

LayoutFocus

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 Primary Action

Role-gated action button at the top of the sidebar. 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>&copy; 2025 Centercode</p>,
};

<LeftNav
  groups={navGroups}
  footer={footer}
  collapsible={true}
/>