SOROUSH.DESIGN
Design SystemMarkdownStyled System

NavTree

A tree of links to the pages of a site: its NavGroups, each with its NavLinks, and any link of its own.

Source

Accessibility

NavTree is a column with no role of its own: put it in a landmark you name - a nav with an aria-label, or the panel of a Sidebar, which is one. A NavGroup that does not fold is a section named by its heading; one that folds is a details and its name is the summary - a button the keys open and close (Enter and Space), with the links under it. A link is an anchor, followed by Enter, and the current page is marked aria-current="page".