# Navigation Configuration

> Configure marketing, app, and admin navigation in the Next.js Prisma SaaS Kit.

*Canonical: https://makerkit.dev/docs/nextjs-prisma/configuration/navigation*

---

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](./overview).

## Navigation Locations

| Location | File | Used For |
|----------|------|----------|
| Header | `apps/web/app/[locale]/(public)/_components/site-navigation.tsx` | Marketing site top nav |
| Footer | `apps/web/app/[locale]/(public)/_components/site-footer.tsx` | Marketing site footer |
| Sidebar | `apps/web/app/[locale]/(internal)/_config/navigation.config.tsx` | Authenticated app sidebar |
| Admin | `packages/admin/src/admin-sidebar.tsx` | Admin sidebar |

## Marketing Navigation

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

```tsx
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`.

```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 →](../authentication/overview)