Navigation Configuration

Customize navigation by editing the files that already render it. Marketing navigation is component-based, the authenticated app sidebar is config-based, and admin navigation lives in the admin package.

This page is part of the Configuration documentation.

Navigation Locations

Marketing Navigation

Edit apps/web/app/[locale]/(public)/_components/site-navigation.tsx to change top-level marketing links:

const links = {
  Blog: {
    label: 'marketing.blog',
    path: '/blog',
  },
  Help: {
    label: 'marketing.help',
    path: '/help',
  },
  FAQ: {
    label: 'marketing.faq',
    path: '/faq',
  },
};

Edit apps/web/app/[locale]/(public)/_components/site-footer.tsx for footer sections and legal links.

Authenticated App Sidebar

The app sidebar uses NavigationConfigSchema from @kit/ui/navigation-schema and is defined in apps/web/app/[locale]/(internal)/_config/navigation.config.tsx.

export const routes: z.output<typeof NavigationConfigSchema>['routes'] = [
  {
    label: 'common.routes.application',
    children: [
      {
        label: 'common.routes.dashboard',
        path: '/dashboard',
        Icon: <Home className={iconClasses} />,
      },
    ],
  },
];

If you add a new i18n key, update apps/web/i18n/messages/en/common.json.

Admin Navigation

Admin navigation is not driven by a config file in apps/web. Update packages/admin/src/admin-sidebar.tsx instead.

Common Pitfalls

• Keep paths aligned with real routes under apps/web/app/[locale]/(internal)/....
• Add translation keys to apps/web/i18n/messages/*, not public/locales.
• Avoid hardcoding duplicate nav structures inside page components.

Next: Authentication →