A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.

<nve-tree behavior-expand>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node>
      node 1-3
      <nve-tree-node>node 1-3-1</nve-tree-node>
      <nve-tree-node>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

node 1 node 1-1

node 1-2

node 1-3 node 1-3-1

node 1-3-2

node 1-3-3

node 2 node 2-1

node 2-2

node 2-3

node 3 node 3-1

node 3-2

node 3-3 node 3-3-1

node 3-3-2

node 3-3-3

Installation

<script type="module">
  import '@nvidia-elements/core/tree/define.js';
</script>

<nve-tree behavior-expand>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node>
      node 1-3
      <nve-tree-node>node 1-3-1</nve-tree-node>
      <nve-tree-node>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

nve api.get nve-tree

CLI / MCP / CDN

Border

Determines if the node depth border renders.

Border

Description

true

false

Tree with border styling for enhanced visual separation and container definition, improving content structure perception.

<nve-tree behavior-expand border>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node>
      node 1-3
      <nve-tree-node>node 1-3-1</nve-tree-node>
      <nve-tree-node>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

node 1 node 1-1

node 1-2

node 1-3 node 1-3-1

node 1-3-2

node 1-3-3

node 2 node 2-1

node 2-2

node 2-3

node 3 node 3-1

node 3-2

node 3-3 node 3-3-1

node 3-3-2

node 3-3-3

Selectable

Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.

Selectable

Description

single

multi

Single-selection tree for choosing one item from hierarchical options, enabling focused navigation and content selection.

<nve-tree selectable="single" behavior-expand behavior-select border>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node selected>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node>
      node 1-3
      <nve-tree-node>node 1-3-1</nve-tree-node>
      <nve-tree-node>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

node 1 node 1-1

node 1-2

node 1-3 node 1-3-1

node 1-3-2

node 1-3-3

node 2 node 2-1

node 2-2

node 2-3

node 3 node 3-1

node 3-2

node 3-3 node 3-3-1

node 3-3-2

node 3-3-3

Selectable Multi

Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.

Selectable

Description

single

multi

Multi-selection tree for choosing many items from hierarchical options, enabling bulk operations and comprehensive content management.

<nve-tree selectable="multi" behavior-expand behavior-select border>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node>node 1-1</nve-tree-node>
    <nve-tree-node selected>node 1-2</nve-tree-node>
    <nve-tree-node expanded>
      node 1-3
      <nve-tree-node>node 1-3-1</nve-tree-node>
      <nve-tree-node>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

node 1 node 1-1

node 1-2

node 1-3 node 1-3-1

node 1-3-2

node 1-3-3

node 2 node 2-1

node 2-2

node 2-3

node 3 node 3-1

node 3-2

node 3-3 node 3-3-1

node 3-3-2

node 3-3-3

Select Event

Interactive selection handling using the select event, with callbacks for node selection changes.

<div nve-layout="column gap:md">
  <div nve-layout="row gap:md">
    <nve-tree id="select-event-tree" selectable="single" behavior-expand behavior-select border>
      <nve-tree-node expanded>
        Documents
        <nve-tree-node>Annual Report.pdf</nve-tree-node>
        <nve-tree-node>Budget.xlsx</nve-tree-node>
        <nve-tree-node expanded>
          Projects
          <nve-tree-node>Project Alpha</nve-tree-node>
          <nve-tree-node>Project Beta</nve-tree-node>
          <nve-tree-node>Project Gamma</nve-tree-node>
        </nve-tree-node>
      </nve-tree-node>
      <nve-tree-node>
        Images
        <nve-tree-node>photo-001.jpg</nve-tree-node>
        <nve-tree-node>photo-002.jpg</nve-tree-node>
        <nve-tree-node>screenshot.png</nve-tree-node>
      </nve-tree-node>
    </nve-tree>
    <div nve-layout="column gap:sm">
      <p nve-text="body sm"><strong>Selected:</strong> <span id="selected-node">None</span></p>
      <p nve-text="body sm"><strong>History:</strong></p>
      <ul id="selection-history" nve-text="body sm">
        <li>No selections yet</li>
      </ul>
    </div>
  </div>
</div>
<script type="module">
  const tree = document.querySelector("#select-event-tree");
  const selectedDisplay = document.querySelector("#selected-node");
  const historyList = document.querySelector("#selection-history");
  const history = [];
  tree.addEventListener("select", (e) => {
    const node = e.detail;
    const nodeText = node.textContent?.trim().split("\n")[0] ?? "Unknown";
    selectedDisplay.textContent = nodeText;
    history.push(nodeText);
    if (history.length > 5) history.shift();
    historyList.innerHTML = history.map((item) => "<li>" + item + "</li>").join("");
  });
</script>

Documents Annual Report.pdf

Budget.xlsx

Projects Project Alpha

Project Beta

Project Gamma

Images photo-001.jpg

photo-002.jpg

screenshot.png

Selected: None

History:

No selections yet

Links

Tree with navigation links for hierarchical menu systems, enabling structured site navigation and content discovery.

<nve-tree behavior-expand>
  <nve-tree-node><a href="#">Documentation</a></nve-tree-node>
  <nve-tree-node><a href="#">Support</a></nve-tree-node>
  <nve-tree-node expanded>
    Elements
    <nve-tree-node><a href="#">Alert</a></nve-tree-node>
    <nve-tree-node><a href="#">Badge</a></nve-tree-node>
    <nve-tree-node><a href="#">Dialog</a></nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    Frameworks
    <nve-tree-node><a href="#">Angular</a></nve-tree-node>
    <nve-tree-node><a href="#">React</a></nve-tree-node>
    <nve-tree-node><a href="#">Vue</a></nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    Languages
    <nve-tree-node><a href="#">JavaScript</a></nve-tree-node>
    <nve-tree-node><a href="#">HTML</a></nve-tree-node>
    <nve-tree-node><a href="#">CSS</a></nve-tree-node>
  </nve-tree-node>
</nve-tree>

Elements Alert

Frameworks Angular

Languages JavaScript

Highlight

Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.

Highlighted

Description

true

false

Tree with highlighted nodes for emphasizing specific items, providing visual focus and search result signal in hierarchical data.

<nve-tree behavior-expand border>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node highlighted>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node expanded>
      node 1-3
      <nve-tree-node highlighted>node 1-3-1</nve-tree-node>
      <nve-tree-node highlighted>node 1-3-2</nve-tree-node>
      <nve-tree-node>node 1-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

node 1 node 1-1

node 1-2

node 1-3 node 1-3-1

node 1-3-2

node 1-3-3

node 2 node 2-1

node 2-2

node 2-3

node 3 node 3-1

node 3-2

node 3-3 node 3-3-1

node 3-3-2

node 3-3-3

Async

Tree with loading states for asynchronous data, including progress indicators and dynamic content loading in hierarchical structures.

<nve-tree border>
  <nve-tree-node expanded>
    node 1
    <nve-tree-node>node 1-1</nve-tree-node>
    <nve-tree-node>node 1-2</nve-tree-node>
    <nve-tree-node expanded>
      node 1-3
      <nve-tree-node>
        <div nve-layout="row gap:xs"><nve-progress-ring status="accent" size="xs"></nve-progress-ring> loading</div>
      </nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 2
    <nve-tree-node>node 2-1</nve-tree-node>
    <nve-tree-node>node 2-2</nve-tree-node>
    <nve-tree-node>node 2-3</nve-tree-node>
  </nve-tree-node>
  <nve-tree-node>
    node 3
    <nve-tree-node>node 3-1</nve-tree-node>
    <nve-tree-node>node 3-2</nve-tree-node>
    <nve-tree-node>
      node 3-3
      <nve-tree-node>node 3-3-1</nve-tree-node>
      <nve-tree-node>node 3-3-2</nve-tree-node>
      <nve-tree-node>node 3-3-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

node 1 node 1-1

node 1-2

node 1-3

loading

node 2 node 2-1

node 2-2

node 2-3

node 3 node 3-1

node 3-2

node 3-3 node 3-3-1

node 3-3-2

node 3-3-3

Tree integrated in vertical navigation. Use for providing structured sidebar navigation for application layouts and content organization.

<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Infrastructure</h2>
    <nve-button selected container="flat">Link 1</nve-button>
    <nve-button container="flat">Link 2</nve-button>
    <nve-icon-button interaction="emphasis" slot="suffix" size="sm">EL</nve-icon-button>
  </nve-page-header>
  <nve-page-panel slot="left" size="sm">
    <nve-page-panel-content>
      <nve-tree behavior-expand selectable="single" behavior-select>
        <nve-tree-node expanded>
          <a href=".">Overview</a>
          <nve-tree-node><a href=".">Dashboard</a></nve-tree-node>
          <nve-tree-node><a href=".">Alerts</a></nve-tree-node>
          <nve-tree-node><a href=".">Activity Feed</a></nve-tree-node>
        </nve-tree-node>
        <nve-tree-node expanded>
          <a href=".">Compute</a>
          <nve-tree-node><a href=".">Clusters</a></nve-tree-node>
          <nve-tree-node><a href=".">Instances</a></nve-tree-node>
          <nve-tree-node><a href=".">Schedulers</a></nve-tree-node>
          <nve-tree-node expanded>
            <a href=".">Provisioning</a>
            <nve-tree-node><a href=".">Templates</a></nve-tree-node>
            <nve-tree-node><a href=".">Reservations</a></nve-tree-node>
          </nve-tree-node>
        </nve-tree-node>
        <nve-tree-node expanded>
          <a href=".">Storage</a>
          <nve-tree-node><a href=".">Volumes</a></nve-tree-node>
          <nve-tree-node><a href=".">Backups</a></nve-tree-node>
          <nve-tree-node><a href=".">Snapshots</a></nve-tree-node>
          <nve-tree-node><a href=".">Retention Policies</a></nve-tree-node>
        </nve-tree-node>
        <nve-tree-node expanded>
          <a href=".">Networking</a>
          <nve-tree-node><a href=".">Load Balancers</a></nve-tree-node>
          <nve-tree-node><a href=".">DNS Zones</a></nve-tree-node>
          <nve-tree-node><a href=".">Gateways</a></nve-tree-node>
          <nve-tree-node expanded>
            <a href=".">Security</a>
            <nve-tree-node><a href=".">Firewalls</a></nve-tree-node>
            <nve-tree-node><a href=".">Policies</a></nve-tree-node>
            <nve-tree-node><a href=".">Certificates</a></nve-tree-node>
          </nve-tree-node>
        </nve-tree-node>
        <nve-tree-node>
          <a href=".">Operations</a>
          <nve-tree-node><a href=".">Runbooks</a></nve-tree-node>
          <nve-tree-node><a href=".">Maintenance</a></nve-tree-node>
          <nve-tree-node><a href=".">Incident Queue</a></nve-tree-node>
        </nve-tree-node>
      </nve-tree>
    </nve-page-panel-content>
  </nve-page-panel>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">Infrastructure</h1>
    <p nve-text="body">Select a placeholder link in the sidebar tree to model deep, category-based navigation.</p>
  </main>
</nve-page>

Drawer based navigation. Use for secondary or mobile navigation when available space gets tight.

<nve-page>
  <nve-page-header slot="header">
    <nve-logo slot="prefix" size="sm" color="brand-green">NV</nve-logo>
    <h2 nve-text="heading" slot="prefix">Infrastructure</h2>
    <nve-icon-button
      popovertarget="drawer"
      slot="suffix"
      container="flat"
      icon-name="menu"
      aria-label="menu"
    ></nve-icon-button>
  </nve-page-header>
  <main nve-layout="column gap:lg pad:lg align:horizontal-stretch">
    <h1 nve-text="heading">main</h1>
    <p nve-text="body">page content</p>
  </main>
  <nve-drawer id="drawer" position="left" size="sm" closable>
    <nve-drawer-header>
      <h3 nve-text="heading medium sm">Navigation</h3>
    </nve-drawer-header>
    <nve-drawer-content>
      <nve-tree behavior-expand>
        <nve-tree-node><a href="#">Documentation</a></nve-tree-node>
        <nve-tree-node><a href="#">Support</a></nve-tree-node>
        <nve-tree-node expanded>
          Elements
          <nve-tree-node><a href="#">Alert</a></nve-tree-node>
          <nve-tree-node><a href="#">Badge</a></nve-tree-node>
          <nve-tree-node><a href="#">Dialog</a></nve-tree-node>
        </nve-tree-node>
        <nve-tree-node>
          Frameworks
          <nve-tree-node><a href="#">Angular</a></nve-tree-node>
          <nve-tree-node><a href="#">React</a></nve-tree-node>
          <nve-tree-node><a href="#">Vue</a></nve-tree-node>
        </nve-tree-node>
        <nve-tree-node>
          Languages
          <nve-tree-node><a href="#">JavaScript</a></nve-tree-node>
          <nve-tree-node><a href="#">HTML</a></nve-tree-node>
          <nve-tree-node><a href="#">CSS</a></nve-tree-node>
        </nve-tree-node>
      </nve-tree>
    </nve-drawer-content>
  </nve-drawer>
</nve-page>

Node Content

Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.

<nve-tree selectable="multi" border behavior-expand behavior-select>
  <nve-tree-node expanded>
    text content
    <nve-tree-node>
      <a href="." nve-text="link">node link</a>
    </nve-tree-node>
    <nve-tree-node> inline content <nve-dot status="success" size="sm"></nve-dot> </nve-tree-node>
    <nve-tree-node>
      <div nve-text="body sm muted" nve-layout="pad-bottom:xs">block</div>
      <p nve-text="body sm">content</p>
    </nve-tree-node>
    <nve-tree-node>
      long form content
      <div slot="content" nve-layout="column gap:sm">
        <a href="#" nve-text="link">This is some longer content in a tree node.</a>
        <a href="#" nve-text="link">This is some longer content in a tree node.</a>
        <a href="#" nve-text="link">This is some longer content in a tree node.</a>
      </div>
    </nve-tree-node>
    <nve-tree-node>
      interactive content
      <div slot="content" nve-layout="column gap:sm">
        <p nve-text="body sm">This is some longer content in a tree node.</p>
        <nve-button>hello there</nve-button>
      </div>
    </nve-tree-node>
    <nve-tree-node>
      input control
      <div slot="content" nve-layout="column gap:sm">
        <nve-input>
          <label>label</label>
          <input type="text" />
        </nve-input>
        <nve-input>
          <label>label</label>
          <input type="text" />
        </nve-input>
      </div>
    </nve-tree-node>
    <nve-tree-node>
      node content checkbox group
      <nve-checkbox-group slot="content">
        <label>label</label>
        <nve-checkbox>
          <label>checkbox 1</label>
          <input type="checkbox" checked />
        </nve-checkbox>
        <nve-checkbox>
          <label>checkbox 2</label>
          <input type="checkbox" />
        </nve-checkbox>
        <nve-checkbox>
          <label>checkbox 3</label>
          <input type="checkbox" />
        </nve-checkbox>
      </nve-checkbox-group>
    </nve-tree-node>
    <nve-tree-node>
      node content radio group
      <nve-radio-group slot="content">
        <label>label</label>
        <nve-radio>
          <label>radio 1</label>
          <input type="radio" checked />
        </nve-radio>
        <nve-radio>
          <label>radio 2</label>
          <input type="radio" />
        </nve-radio>
        <nve-radio>
          <label>radio 3</label>
          <input type="radio" />
        </nve-radio>
      </nve-radio-group>
    </nve-tree-node>
  </nve-tree-node>
</nve-tree>

text content node link

inline content

block

content

long form content

This is some longer content in a tree node. This is some longer content in a tree node. This is some longer content in a tree node.

interactive content

This is some longer content in a tree node.

hello there

input control

label

node content checkbox group label

checkbox 1

checkbox 2

checkbox 3

node content radio group label

radio 1

radio 2

radio 3

Dynamic Tree

Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.

<test-dynamic-tree></test-dynamic-tree>

Example in lit-html:

<nve-tree-node .expandable="${node.nodes.length}" .expanded="${node.expanded}" @open="${e => this.#open(e, node)}" @close="${e => this.#close(e, node)}">
  ${node.label} node
  ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}
</nve-tree-node>

Overflow

Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.

<div style="width: 300px; height: 500px; overflow: auto; outline: 1px solid #ccc; padding: 12px">
  <nve-tree border behavior-expand>
    <nve-tree-node expanded>
      node 1
      <nve-tree-node>node 1-1</nve-tree-node>
      <nve-tree-node>node 1-2</nve-tree-node>
      <nve-tree-node expanded>
        node 1-3
        <nve-tree-node>node 1-3-1</nve-tree-node>
        <nve-tree-node>node 1-3-2</nve-tree-node>
        <nve-tree-node expanded>
          node 1-3-3
          <nve-tree-node>node 1-3-3-1</nve-tree-node>
          <nve-tree-node>node 1-3-3-2</nve-tree-node>
          <nve-tree-node expanded>
            node 1-3-3-3
            <nve-tree-node>node 1-3-3-3-1</nve-tree-node>
            <nve-tree-node>node 1-3-3-3-2</nve-tree-node>
            <nve-tree-node expanded>
              node 1-3-3-3-3
              <nve-tree-node>node 1-3-3-3-3-1</nve-tree-node>
              <nve-tree-node>node 1-3-3-3-3-2</nve-tree-node>
              <nve-tree-node expanded>
                node 1-3-3-3-3-3
                <nve-tree-node>node 1-3-3-3-3-3-1</nve-tree-node>
                <nve-tree-node>node 1-3-3-3-3-3-2</nve-tree-node>
                <nve-tree-node expanded>
                  node 1-3-3-3-3-3-3
                  <nve-tree-node>node 1-3-3-3-3-3-3-1</nve-tree-node>
                  <nve-tree-node>node 1-3-3-3-3-3-3-2</nve-tree-node>
                  <nve-tree-node expanded>
                    node 1-3-3-3-3-3-3-3
                    <nve-tree-node>node 1-3-3-3-3-3-3-3-1</nve-tree-node>
                    <nve-tree-node>node 1-3-3-3-3-3-3-3-2</nve-tree-node>
                    <nve-tree-node expanded>
                      node 1-3-3-3-3-3-3-3-3
                      <nve-tree-node>node 1-3-3-3-3-3-3-3-3-1</nve-tree-node>
                      <nve-tree-node>node 1-3-3-3-3-3-3-3-3-2</nve-tree-node>
                      <nve-tree-node>node 1-3-3-3-3-3-3-3-3-3</nve-tree-node>
                    </nve-tree-node>
                  </nve-tree-node>
                </nve-tree-node>
              </nve-tree-node>
            </nve-tree-node>
          </nve-tree-node>
        </nve-tree-node>
      </nve-tree-node>
    </nve-tree-node>
    <nve-tree-node expanded>
      node 2
      <nve-tree-node>node 2-1</nve-tree-node>
      <nve-tree-node>node 2-2</nve-tree-node>
      <nve-tree-node>node 2-3</nve-tree-node>
    </nve-tree-node>
  </nve-tree>
</div>

node 1 node 1-1

node 1-2

node 1-3 node 1-3-1

node 1-3-2

node 1-3-3 node 1-3-3-1

node 1-3-3-2

node 1-3-3-3 node 1-3-3-3-1

node 1-3-3-3-2

node 1-3-3-3-3 node 1-3-3-3-3-1

node 1-3-3-3-3-2

node 1-3-3-3-3-3 node 1-3-3-3-3-3-1

node 1-3-3-3-3-3-2

node 1-3-3-3-3-3-3 node 1-3-3-3-3-3-3-1

node 1-3-3-3-3-3-3-2

node 1-3-3-3-3-3-3-3 node 1-3-3-3-3-3-3-3-1

node 1-3-3-3-3-3-3-3-2

node 1-3-3-3-3-3-3-3-3 node 1-3-3-3-3-3-3-3-3-1

node 1-3-3-3-3-3-3-3-3-2

node 1-3-3-3-3-3-3-3-3-3

node 2 node 2-1

node 2-2

node 2-3

Release Status

All elements and features go through 3 phases of stability, pre-release, beta and stable.

pre-release

Docs Preview

API Documentation

Fully Themeable

beta

Robust unit test coverages

Passed API Review

Passed Designer VQA Review

Included in library package

stable

No known outstanding AA WCAG issues

No known outstanding performance issues

Adapts to different screen/container sizes

No breaking API changes for at least 90 days

Tree View

Installation

Border

Selectable

Selectable Multi

Select Event

Links

Highlight

Async

Complex Tree Navigation

Infrastructure

Infrastructure

Drawer Navigation

Node Content

Dynamic Tree

Overflow

Release Status