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

Commit dc9aa61

Browse files
authored
Updates NavList documentation for 4-level nesting (#495)
* updates NavList documentation for 4-level nesting * rewording and reformating
1 parent b3724c3 commit dc9aa61

File tree

2 files changed

+5
-3
lines changed

2 files changed

+5
-3
lines changed

content/components/nav-list.mdx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,12 +124,14 @@ Grouping should be used to make long or complex nav lists easier to comprehend.
124124
src="https://user-images.githubusercontent.com/2313998/226925617-c5a27545-905f-491e-9059-6389264ab77d.png"
125125
/>
126126

127-
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).
128-
129127
Sub-items may be collapsed or expanded under a top-level nav list item.
130128

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

131+
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.
132+
133+
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.
134+
133135
## Accessibility
134136

135137
Nav lists should always be labeled for assistive technologies, even if the label is visually hidden.

content/components/tree-view.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ If a tree view is truly the best pattern for your use-case and none of the sugge
237237

238238
### Tree views are only for hierarchical lists
239239

240-
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.
240+
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).
241241

242242
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.
243243

0 commit comments

Comments
 (0)