Skip to main content

Navigation structure reflects PRD hierarchy

ab-001545 · goal-alignment.ux-alignment.navigation-reflects-prd-hierarchy
Severity: highactive

Why it matters

Navigation is the primary map users carry in their heads of how your product is organized. When the sidebar, navbar, or routing hierarchy fails to reflect the information architecture described in the PRD — sections missing, features buried under the wrong parent, URL structure contradicting the product's mental model — users cannot find features that actually exist, support volume rises around 'where is X?' questions, and first-session retention drops because the product feels smaller or more confusing than it is. Discoverability failures of this kind also undermine SEO and accessibility landmarks by misrepresenting page hierarchy to crawlers and screen readers.

Severity rationale

High because a mismatched navigation hides shipped features from users and distorts the product's mental model, though it does not strictly block a determined user from reaching functionality via direct URLs.

Remediation

Edit your primary navigation component (commonly src/components/nav.tsx, src/components/sidebar.tsx, or the nav block inside src/app/layout.tsx) to expose every top-level section the PRD describes, using the ordering and grouping it specifies:

// src/components/nav.tsx
export const NAV_ITEMS = [
  { href: '/dashboard', label: 'Dashboard' },
  { href: '/projects',  label: 'Projects'  },
  { href: '/analytics', label: 'Analytics' },
];

Align your URL hierarchy with these groupings so routing communicates the same structure.

Detection

  • ID: goal-alignment.ux-alignment.navigation-reflects-prd-hierarchy
  • Severity: high
  • What to look for: Enumerate every relevant item. Compare the information architecture implied by the PRD (the sections, flows, and hierarchy of the product) against the actual navigation structure in the codebase (sidebar, navbar, routing hierarchy, link structures). Examine navigation component files (sidebar.tsx, navbar.tsx, nav.tsx, header.tsx, or equivalent) and the routing structure.
  • Pass criteria: At least 1 of the following conditions is met. The primary navigation exposes the main sections described in the PRD. Users can access all core feature areas from the navigation. The routing hierarchy (URL structure) reflects the logical grouping described in the PRD.
  • Fail criteria: Key sections from the PRD are not represented in the navigation. The navigation structure implies a different product organization than the PRD describes. Core features are buried in unexpected locations relative to PRD expectations.
  • Skip (N/A) when: The PRD contains no information architecture, navigation design, or user-interface structure descriptions — it is purely a technical specification with no UX direction.
  • Detail on fail: Identify the specific navigation gaps. Example: "PRD describes a 3-section app (Dashboard, Projects, Analytics) but navigation only shows Dashboard and Projects. Analytics is implemented (/analytics route exists) but not linked." Max 500 chars.
  • Remediation: Update your navigation component (e.g., src/components/nav.tsx or src/app/layout.tsx) to add links to the missing sections. If the PRD specifies a particular ordering or grouping of navigation items, adjust your nav structure to reflect it. The navigation structure communicates your product's mental model to users — misalignment here creates confusion even when the underlying features work correctly.

Taxons

History