Skip to content
Paramanu v0.1.0-alpha.0

Tree View

The Tree View displays hierarchical data with expandable/collapsible branches and selectable items.

Basic Usage

  • src
    • index.ts
  • README.md
import { Tree, TreeBranch, TreeItem, TreeItemContent, TreeIndicator, TreeGroup } from "@paramanu/navigation-react"


export default function App() {
return (
  <Tree>
    <TreeBranch expanded>
      <TreeItemContent>
        <TreeIndicator expanded />
        src
      </TreeItemContent>
      <TreeGroup>
        <TreeItem>index.ts</TreeItem>
      </TreeGroup>
    </TreeBranch>
    <TreeItem>README.md</TreeItem>
  </Tree>
)
}
<ul class="pm-tree pm-tree--md" role="tree">
<li class="pm-tree__branch pm-tree__branch--expanded" role="treeitem" aria-expanded="true">
  <div class="pm-tree__item-content">
    <span class="pm-tree__indicator pm-tree__indicator--expanded" aria-hidden="true"></span>
    src
  </div>
  <ul class="pm-tree__group" role="group">
    <li class="pm-tree__item" role="treeitem">index.ts</li>
  </ul>
</li>
<li class="pm-tree__item" role="treeitem">README.md</li>
</ul>