Skip to content
This repository was archived by the owner on Jul 7, 2025. It is now read-only.

Updates NavList documentation for 4-level nesting #495

Merged
merged 3 commits into from
Jun 6, 2023
Merged

Updates NavList documentation for 4-level nesting #495

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df4c7cb
updates NavList documentation for 4-level nesting
mperrotti May 30, 2023
36dc513
rewording and reformating
mperrotti May 30, 2023
c230b64
Merge branch 'main' of github.com:primer/design into mp/navlist-nesti…
mperrotti May 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions content/components/nav-list.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,12 +124,14 @@ Grouping should be used to make long or complex nav lists easier to comprehend.
src="https://user-images.githubusercontent.com/2313998/226925617-c5a27545-905f-491e-9059-6389264ab77d.png"
/>

Sub-items may be used to render nested navigation structures. Only a single level of nesting is supported. If you need to handle a deeply-nested structure, consider using a [tree view](/components/tree-view).

Sub-items may be collapsed or expanded under a top-level nav list item.

The top-level nav list item cannot be a link; it only behaves as a toggle that expands and collapses the sub-items.

Sub-items may be used to render nested navigation structures. Up to 4 levels of nesting are supported. If you need to handle a more deeply-nested navigation structure, reconsider the design of your navigation or the information hierarchy.

Do not replace your NavList with a [tree view](/components/tree-view) to support a deeply nested navigation structure. A tree view is never an accessible replacement for navigation, as it serves a different purpose and is not recognized as navigation by assistive technologies.

## Accessibility

Nav lists should always be labeled for assistive technologies, even if the label is visually hidden.
Expand Down
2 changes: 1 addition & 1 deletion content/components/tree-view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ If a tree view is truly the best pattern for your use-case and none of the sugge

### Tree views are only for hierarchical lists

A tree view solves a very specific problem. It's not a multi-purpose tool like an [action list](/action-list) or meant for site navigation.
A tree view solves a very specific problem. It's not a multi-purpose tool like an [action list](/action-list) or meant for site navigation like a [nav list](/nav-list).

Tree views are used to communicate a hierarchical list of items, and allow a user to navigate through, select, and take action on one or more items. A comparable expereince would be a list of files in a code editor, or an operating system file explorer. While they may visually look like navigation, tree views have specific interaction modes and expectations for assistive technology that differs from other patterns. Trying to use a tree view for something that looks visually apprpriate, but is not functionally inline with its intended use case may cause confusion or an unusable experience, especially if the user cannot see the screen.

Expand Down