diff --git a/content/components/nav-list.mdx b/content/components/nav-list.mdx index b86785b36..248c9da96 100644 --- a/content/components/nav-list.mdx +++ b/content/components/nav-list.mdx @@ -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. diff --git a/content/components/tree-view.mdx b/content/components/tree-view.mdx index 6a7e34b95..3be9aaecc 100644 --- a/content/components/tree-view.mdx +++ b/content/components/tree-view.mdx @@ -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.