Shared Navigation

Component AreaCross-cutting navigationApp-aware helpers

Shared navigation components live in src/components/ui/ alongside other UI primitives.

These components sit above basic UI because they understand application concerns like locale routing, theme state, and cross-page navigation behavior.

How to think about these components

These navigation helpers know about the app context (locale, theme, routing). They live in src/components/ui/ rather than in a separate shared folder.

What this component area includes

Navigation behavior

Shared helpers can coordinate route-aware interactions without being locked to a single page.

Locale awareness

Navigation components can understand localized routes and user-facing language changes.

Shared app state

Theme and navigation preferences can be handled in one reusable place instead of being repeated across layouts.

Current components

  • src/components/ui/back-button.tsx
  • src/components/ui/language-handler.tsx
  • src/components/ui/theme-switcher.tsx

Main responsibilities

  • route-aware navigation helpers
  • locale switching
  • theme switching
  • shared navigation behavior across surfaces

Purpose

These components are not raw UI primitives. They are app-aware helpers that connect to concerns such as:

  • localized routing
  • theme selection
  • navigation behavior
Placement rule

Placement rule

These navigation-aware components live in src/components/ui/ when they:

  • are reused across different parts of the app
  • know about locales, routes, or app behavior
  • should not live inside a single page folder

Good rule of thumb

If the component needs routing, locale, theme, or application context to make sense, it belongs in src/components/ui/ as a reusable app-aware helper.