Navigation Items

Custom navigation items are defined in frontend/src/custom/navItems.ts. They are automatically rendered in the sidebar under a "Modules" section — no need to edit AppSidebar.tsx.

Interface

export interface CustomNavItem {
  label: string
  icon: LucideIcon
  href: string
  requires?: 'org:member' | 'org:admin' | 'org:owner'
  feature?: string
  permission?: string
  children?: CustomNavItem[]
}

Properties

• label — Display text in the sidebar
• icon — A Lucide icon component
• href — Route path (e.g., /org/projects)
• requires — Minimum org role: org:member, org:admin, or org:owner
• feature — Plan feature gate (item is hidden if the org's plan does not include it)
• permission — Org-level permission check (owners always pass)
• children — Optional sub-items rendered as a collapsible sub-menu

Example

// frontend/src/custom/navItems.ts

import { FolderKanban, type LucideIcon } from 'lucide-react'

export const customNavItems: CustomNavItem[] = [
  {
    label: 'Projects',
    icon: FolderKanban,
    href: '/org/projects',
    requires: 'org:member',
    feature: 'projects',
    permission: 'view_projects',
  },
]

Nested Navigation

Use the children property to create collapsible sub-menus:

import { FolderKanban, LayoutGrid, Calendar } from 'lucide-react'

export const customNavItems: CustomNavItem[] = [
  {
    label: 'Projects',
    icon: FolderKanban,
    href: '/org/projects',
    requires: 'org:member',
    feature: 'projects',
    permission: 'view_projects',
    children: [
      {
        label: 'Board',
        icon: LayoutGrid,
        href: '/org/projects/board',
        permission: 'view_projects',
      },
      {
        label: 'Timeline',
        icon: Calendar,
        href: '/org/projects/timeline',
        permission: 'view_projects',
      },
    ],
  },
]

Frontend Routes

Navigation items should have corresponding routes in frontend/src/custom/routes.tsx. See Custom Features for details on frontend route registration.