# Navigation Configuration

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

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

---

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

## Locations

| Navigation | File |
|-----------|------|
| public header links | `apps/web/src/components/site/site-navigation.tsx` |
| public footer links | `apps/web/src/components/site/site-footer.tsx` |
| app sidebar | `apps/web/src/config/navigation.config.tsx` |
| admin sidebar | `packages/admin/src/admin-sidebar.tsx` |

## App Sidebar

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

Current example:

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

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