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

A tree of links to the pages of a site: its NavGroups, each with its NavLinks, and any link of its own. It is plain markup - links and lists, nothing that needs JavaScript - so it is in the server-rendered page and works with scripts off. A group that folds is a native details. The current page is a pill of the tree's color; a hovered link is a wash of it.

It is what goes in the panel of a navigation rail - a Sidebar with layout="stacked" and a panel - or in a drawer, or in a column of its own.

import { NavTree, NavGroup, NavLink } from '@soroush.tech/design-system/NavTree'

;<nav aria-label="Documentation">
  <NavTree>
    <NavGroup label="Get started">
      <NavLink href="/install/">Installation</NavLink>
      <NavLink href="/usage/" isCurrent>
        Usage
      </NavLink>
    </NavGroup>
    <NavGroup label="Components" isCollapsible isOpen>
      <NavLink href="/components/button/">Button</NavLink>
      <NavLink href="/components/tabs/" note="v2">
        Tabs
      </NavLink>
    </NavGroup>
    <NavGroup label="More">
      <NavLink href="https://github.com/soroush-tech" isExternal>
        Source
      </NavLink>
    </NavGroup>
  </NavTree>
</nav>

Examples

Default

<NavTree />

Secondary

<NavTree color="secondary" />

Folding

const args: Partial<NavTreeProps> = {}

<nav aria-label="Components" style={{ width: '18rem' }}>
  <NavTree {...args}>
    <NavGroup label="Layout" isCollapsible>
      <NavLink href="#view">View</NavLink>
      <NavLink href="#flex">Flex</NavLink>
    </NavGroup>
    <NavGroup label="Inputs" isCollapsible isOpen>
      <NavLink href="#button">Button</NavLink>
      <NavLink href="#text-input" isCurrent>
        TextInput
      </NavLink>
    </NavGroup>
    <NavGroup label="Feedback" isCollapsible>
      <NavLink href="#alert">Alert</NavLink>
    </NavGroup>
  </NavTree>
</nav>

In ANavigation Rail

const args: Partial<NavTreeProps> = {}

<Sidebar
  aria-label="Documentation"
  layout="stacked"
  bg="paper"
  panelProps={{ 'aria-label': 'Components', bg: 'secondary', p: 2 }}
  panel={
    <NavTree {...args}>
      <NavGroup label="Components">
        <NavLink href="#button" isCurrent>
          Button
        </NavLink>
        <NavLink href="#tabs">Tabs</NavLink>
      </NavGroup>
    </NavTree>
  }
>
  <SidebarItem icon="home" label="Home" href="#home" aria-pressed={undefined} />
  <SidebarItem
    icon="add_circle"
    label="Components"
    href="#components"
    isSelected
    aria-current="page"
    aria-pressed={undefined}
  />
  <SidebarItem icon="palette" label="Styles" href="#styles" aria-pressed={undefined} />
</Sidebar>