Navigation Patterns

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";

const items = [
  { href: "/dashboard", label: "Dashboard", icon: Home },
  { href: "/invoices", label: "Invoices", icon: FileText },
  { href: "/settings", label: "Settings", icon: Settings },
];

export function Sidebar() {
  const pathname = usePathname();
  return (
    
      {items.map(({ href, label, icon: Icon }) => {
        const active = pathname === href || pathname.startsWith(href + "/");
        return (
          
            
            {label}
          
        );
      })}
    
  );
}

aria-current="page" tells screen readers which item is active — color alone isn't enough. Match the active route with startsWith so nested pages keep their parent highlighted.

Command palette (⌘K)

import { CommandDialog, CommandInput, CommandList, CommandItem, CommandGroup } from "@/components/ui/command";

export function CommandMenu() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen((o) => !o); }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);

  return (
    
      
      
        
           go("/invoices")}>Invoices
           go("/settings")}>Settings
        
      
    
  );
}

cmdk (under shadcn Command) gives fuzzy search, arrow-key nav, and focus management for free.

Tabs & breadcrumbs

• Tabs for switching views of the same resource (Overview / Activity / Settings). Use shadcn Tabs; sync the active tab to ?tab= for deep links.
• Breadcrumbs for hierarchy (Workspace › Project › Settings); wrap in ` and mark the last crumb aria-current="page"`.

Pitfalls

• Active state by color only — add aria-current and ideally weight/indicator.
• Exact-match active route breaks on nested pages — use startsWith.
• Command palette without focus trap/Esc — use the Command dialog primitive.
• Tabs that lose state on refresh — persist to the URL.
• No aria-label on multiple ``s — screen readers can't distinguish them.

Hand-off

Wayfinding that sits inside the responsive-layout shell; deep flows route into settings-pages, billing-and-pricing, and dashboard-layout.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: param087
• Source: param087/saas-ui-skills
• License: MIT

Install and usage instructions live in the source repository linked above.