Navigation Configuration

Where to edit public and internal navigation in the current app.

Navigation is split between public components and the authenticated app sidebar config.

Locations

NavigationFile
public header linksapps/web/src/components/site/site-navigation.tsx
public footer linksapps/web/src/components/site/site-footer.tsx
app sidebarapps/web/src/config/navigation.config.tsx
admin sidebarpackages/admin/src/admin-sidebar.tsx

App Sidebar

The sidebar config exports routes and uses NavigationConfigSchema from @kit/ui/navigation-schema.

Current example:

import { HelpCircleIcon, Home } from 'lucide-react';
import * as z from 'zod';
import { env } from '@kit/shared/env';
import { NavigationConfigSchema } from '@kit/ui/navigation-schema';
const iconClasses = 'w-4';
export const routes: z.output<typeof NavigationConfigSchema>['routes'] = [
  {
    label: 'common.routes.application',
    children: [
      {
        label: 'common.routes.dashboard',
        path: env('VITE_APP_HOME_PATH') ?? '/dashboard',
        Icon: <Home className={iconClasses} />,
      },
    ],
  },
];

If you add translated labels, store them in locale message files such as:

packages/i18n/src/messages/en/common.json

Public Navigation

Public navigation is component-driven, not schema-driven. Edit the JSX in the header/footer components directly when adding or removing marketing links.

Notes

  • use real routes that exist under apps/web/src/routes/...
  • avoid examples from old route trees like app/home/[account]/...
  • admin nav is separate from the app sidebar

Next: Authentication →