# Navigation Configuration

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

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

---

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

## Locations

| Navigation | File |
|-----------|------|
| public header links | `apps/web/app/[locale]/(public)/_components/site-navigation.tsx` |
| public footer links | `apps/web/app/[locale]/(public)/_components/site-footer.tsx` |
| internal sidebar | `apps/web/app/[locale]/(internal)/_config/navigation.config.tsx` |
| admin sidebar | `packages/admin/src/admin-sidebar.tsx` |

## Internal Sidebar

The internal sidebar exports `routes` and uses `NavigationConfigSchema` from `@kit/ui`.

Current example:

```tsx
export const routes = [
  {
    label: 'common.routes.application',
    children: [
      {
        label: 'common.routes.dashboard',
        path: '/dashboard',
      },
    ],
  },
];
```

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

```text
apps/web/i18n/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/app/[locale]/...`
- avoid examples from old route trees like `app/home/[account]/...`
- admin nav is separate from the internal app sidebar

---

**Next:** [Authentication →](../authentication/overview)