Navigation Patterns

Overview

Navigation is how users build a mental map of your SaaS app. The core set: a sidebar for primary sections, tabs for views within a page, breadcrumbs for depth, and a command palette for power users. Mark up each with semantic landmarks and correct active state so both mouse and keyboard users stay oriented.

When to use

• Building the primary sidebar or in-page tabs.
• Adding ⌘K quick navigation/search.
• Users get lost or can't tell where they are.

Sidebar with active state

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";