Navigation

Edge Kit separates a page's content from the layout and navigation around it. The public site, authentication screens, and dashboard each have a starting structure you can adapt as your product grows.

TanStack Router connects URLs to React pages and nested layouts. Its file-based routing generates the route tree for you, while typed links help keep navigation aligned with the destinations that exist.

Routes and layouts

A route defines a destination and its behavior. A layout provides the shared frame for its child pages, such as the header, sidebar, page actions, and providers.

Place a new destination within the layout that matches its audience. A public product page belongs with marketing; a customer's document library belongs in the dashboard. You do not need to duplicate the surrounding sidebar or session handling for every page.

The architecture guide explains how these layouts fit into rendering and server access.

Menus and destinations

Navigation labels describe the customer's task or the content they will find. Group related destinations, keep frequently used features easy to reach, and use a clear active state so the current location is visible.

The starting dashboard menu demonstrates nested settings and top-level features. Adapt those entries to your product and review the external demo, source, documentation, and community links before release.

Shared destinations live in src/config/paths.ts. Use that configuration alongside the router's typed links when a URL appears in multiple places, such as a pricing button, account menu, and email callback destination.

For example, the same settings destination can appear in an account menu or a page:

import { Link } from "@tanstack/react-router";

import { pathsConfig } from "@/config/paths";
import { m } from "@/lib/i18n/messages.js";

<Link to={pathsConfig.dashboard.settings.index}>{m.settings()}</Link>;

The destination comes from shared configuration, while its label comes from the current language's messages.

A route and a menu item are separate: creating a page does not automatically add it to the customer-facing navigation. Conversely, adding a menu entry does not create its destination.

Access and visibility

The dashboard layout redirects customers without a session. Keep its page guard for the navigation experience and authorize each private data operation independently.

A paid feature can display an upgrade prompt or a disabled entry to explain its value. Either approach still needs a server-side plan check when the action is performed. Protected calls and paid access cover the two policies.

Keep account recovery, sign-in, and public contact destinations reachable without accidentally placing them behind the dashboard's session requirement.

Languages and responsive layouts

The router integrates with the kit's localized URLs. Follow the existing link conventions so switching language preserves the intended destination and browser history continues to work.

Menu labels belong in the translation catalogs. Allow space for longer text and retain an accessible label for icon-only controls. A collapsed sidebar and a mobile menu should still expose the same essential destinations.

Review the header and footer together when changing public navigation. Customers should have a predictable route between your offer, pricing, support, and legal information, with one clear next action for registration or contact.