Side navigation

Problem Context

• A section has enough related pages that page-level links or tabs become too shallow.
• Users often move among sibling and child pages inside one product area.
• The product already has global navigation, so local hierarchy needs a secondary but persistent place.

Selection Rules

• Choose side navigation when users need persistent access to related pages in one section or area.
• Keep the hierarchy to one to three visible levels; deeper structures need information architecture cleanup, search, or another navigation model.
• Show the current page and expand its parent chain on deep links and route changes.
• Use short labels derived from page titles rather than full marketing or legal headings.
• Keep global destinations, account utilities, and sign-out controls out of local side navigation.
• Use tabs instead when the destinations are shallow sibling panels for one object, and use a drawer when the navigation must be dismissible on constrained screens.

Required States

• Default state with the local section hierarchy visible beside content.
• Current page state that matches the content heading and route.
• Expanded parent state when a child or grandchild page is active.
• Collapsed parent state that does not hide the user's current location.
• Scrollable long-list state with current item still reachable and visible.
• Responsive state that turns into a drawer or menu only when space requires it.

Interaction Contract

• Activating a side-nav item changes the local page and updates current-page semantics.
• The current item's parent chain remains visible after navigation and direct deep links.
• Collapsing a parent with the current page either remains blocked, keeps a current summary visible, or clearly indicates the hidden current page.
• Side navigation does not reset unrelated local filters, drafts, or scroll state unless the route change requires it and the user is warned.
• Keyboard focus moves through parent toggles and child links in reading order, then proceeds to main content.
• Responsive drawer variants restore focus to the opener when dismissed and keep the same local hierarchy.

Implementation Checklist

• Derive side-nav structure from the current section's information architecture rather than the full product route table.
• Use a labeled navigation landmark and mark the current page programmatically.
• Expand active ancestors on first render, direct links, and back/forward navigation.
• Limit nesting depth and test whether users can find lower items without excessive scrolling.
• Keep side navigation visually separate from global navigation and page actions.
• Define responsive behavior for when the side nav becomes a drawer, collapses to a menu, or moves below the heading.
• Preserve local page state where appropriate when users move between sibling pages.

Common Generated-UI Mistakes

• Duplicating global navigation links in the side navigation.
• Letting the highlighted item drift from the page heading or route.
• Hiding the active child under a collapsed parent.
• Building a five-level tree that users cannot scan.
• Using side navigation for one or two pages that do not need hierarchy.
• Replacing persistent desktop side navigation with a hamburger drawer that users must reopen for every sibling page.

Critique Questions

• Is this side navigation scoped to one section, or is it a second global nav?
• Can a deep-linked user see the current page and its parent without clicking?
• Are labels short enough to scan in a narrow side column?
• What happens to current state when a parent is collapsed or the viewport narrows?
• Would tabs, breadcrumbs, in-page navigation, or global navigation better match the user's movement?