USWDS Side navigation component
Defines side navigation as hierarchical vertical navigation at the side of a page, with one to three levels, current-page indication, short labels, and guidance to avoid unnecessary duplicate horizontal and vertical navigation.
What this source can teach
Use this source to compare a documented solution with the task and states in your own product.
- Start with the original. Open the source and find the guidance or example relevant to your task.
- Trace the connection. Use the claim notes below to see how this site applies the source to specific patterns.
- Check the setting. Compare the source's platform, people, and constraints with your own decision.
Pattern Decisions This Source Supports
| Pattern | Supported decision | Required contract | Claim note |
|---|---|---|---|
| Navigation drawer | Choose a navigation drawer when destinations need occasional access from a constrained layout and can tolerate one extra open step. | The opener toggles or opens the drawer and exposes expanded or modal state as appropriate. | USWDS side navigation guidance supports the distinction between persistent side hierarchy and drawer-style temporary navigation. |
| Responsive navigation adaptation | Choose responsive navigation adaptation when the navigation surface itself must change across viewport, posture, orientation, or destination-count constraints. | The adapted surface changes presentation, not the user's destination model. | Supports persistent side navigation and current page indication for expanded layouts. |
| Side navigation | Choose side navigation when users need persistent access to related pages in one section or area. | Activating a side-nav item changes the local page and updates current-page semantics. | USWDS defines side navigation as hierarchical side-of-page sub-navigation with one to three levels, active current page state, and short labels. |
Comparisons supported by this source
- In-page anchor navigation vs breadcrumbs vs side navigation
USWDS side navigation guidance distinguishes local section pages from same-page anchor lists.
- Navigation drawer vs side navigation vs bottom navigation
USWDS side navigation guidance distinguishes persistent local hierarchy from drawer-like temporary navigation.
- Responsive navigation adaptation vs global navigation vs bottom navigation vs navigation drawer vs side navigation vs header
Supports persistent side navigation and current-page state as an expanded local navigation alternative.
- Service navigation vs global navigation vs side navigation
USWDS side navigation guidance distinguishes local section hierarchy from broader service or global destinations.
- Side navigation vs global navigation vs tabs
USWDS defines side navigation as one-to-three-level side hierarchy with current-page indication and cautions against unnecessary duplicate navigation systems.
Evidence Role
This source is treated as pattern-library evidence. Its value comes from the specific claims and setting described above.
Publisher: U.S. Web Design System. Last checked: .