pattern-library checked
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.
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. |
Evidence Role
This source is treated as pattern-library evidence. Use it to validate the decision rules above, not as a visual style reference.
Publisher: U.S. Web Design System. Last checked: .