TreeItem

Stable
WCAG 2.2 evidence
RTL

One row of a Tree, such as a folder or a department. Built on React Aria TreeItem: a row of a treegrid with aria-level, aria-expanded on rows that have children, and aria-selected when the tree is selectable. The arrow keys move between rows; Right and Left (mirrored in right-to-left locales) expand, collapse or move to the parent; Home and End jump; typing a name jumps to it; Enter or Space selects (WCAG 2.1.1, 4.1.2). The chevron is a button named "Expand" or "Collapse" for pointer users; with selectionMode="multiple" on the tree each row shows a checkbox. The Figma Type (branch open, branch closed, leaf) follows from the children and the expanded state, the Depth from the nesting (any depth indents by 20 px), and the selected and disabled states from the tree (selectedKeys, disabledKeys) or isDisabled. Selected rows change fill, colour and weight (1.4.1); keyboard focus draws the inset ring (2.4.7). Consumer duties: row labels (and textValue for rich labels), and announcing asynchronous loading.

import { TreeItem } from "@nexera-ui/react";

Loading example…

5
examples: 30
props: 2
live controls: 1
platform: 10
WCAG criteria: 1
block uses it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

children

isDisabledfalse

Generated code

import { TreeItem } from "@nexera-ui/react";

<TreeItem />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

Single selection

Single selection (selectionMode="single" on the tree): the selected row uses the active fill and a heavier label.

Loading example…

app.tsx

import { Tree, TreeItem } from "@nexera-ui/react";
import { LuFileText, LuFolder } from "react-icons/lu";

const folder = <LuFolder />;

const file = <LuFileText />;

export function SingleSelection() {
  return (
    <Tree
      aria-label="Folders"
      selectionMode="single"
      defaultSelectedKeys={["offer"]}
      defaultExpandedKeys={["engineering"]}
      className="max-w-xs"
    >
      <TreeItem id="engineering" label="Engineering" branchIcon={folder} count="24">
        <TreeItem id="offer" label="Offer letter.pdf" leafIcon={file} />
        <TreeItem id="contract" label="Contract.pdf" leafIcon={file} />
      </TreeItem>
      <TreeItem id="archive" label="Archive" branchIcon={folder} isDisabled>
        <TreeItem id="old" label="2019.zip" leafIcon={file} />
      </TreeItem>
    </Tree>
  );
}

Checkboxes

Figma Show checkbox: with selectionMode="multiple" every row has a checkbox named "Select" + the row label.

Loading example…

app.tsx

import { Tree, TreeItem } from "@nexera-ui/react";
import { LuFolder } from "react-icons/lu";

const folder = <LuFolder />;

export function Checkboxes() {
  return (
    <Tree
      aria-label="Share with teams"
      selectionMode="multiple"
      defaultSelectedKeys={["platform"]}
      defaultExpandedKeys={["engineering"]}
      className="max-w-xs"
    >
      <TreeItem id="engineering" label="Engineering" branchIcon={folder}>
        <TreeItem id="platform" label="Platform" leafIcon={folder} />
        <TreeItem id="mobile" label="Mobile" leafIcon={folder} />
      </TreeItem>
      <TreeItem id="people" label="People operations" leafIcon={folder} />
    </Tree>
  );
}

Deep and long

Deep nesting and long names: every level indents by 20 px and labels wrap instead of truncating.

Loading example…

app.tsx

import { Tree, TreeItem } from "@nexera-ui/react";
import { LuFileText, LuFolder } from "react-icons/lu";

const folder = <LuFolder />;

const file = <LuFileText />;

export function DeepAndLong() {
  return (
    <Tree
      aria-label="Organisation"
      defaultExpandedKeys={["company", "engineering", "platform"]}
      className="max-w-xs"
    >
      <TreeItem id="company" label="Nexera HR" branchIcon={folder}>
        <TreeItem id="engineering" label="Engineering" branchIcon={folder}>
          <TreeItem
            id="platform"
            label="Platform infrastructure and developer experience"
            branchIcon={folder}
          >
            <TreeItem
              id="oncall"
              label="On-call rotation and incident response handbook.pdf"
              leafIcon={file}
            />
          </TreeItem>
        </TreeItem>
      </TreeItem>
    </Tree>
  );
}

Right to left

Right-to-left: indentation starts from the right, closed chevrons point left, and Left expands.

Loading example…

app.tsx

import { Tree, TreeItem } from "@nexera-ui/react";
import { LuFileText, LuFolder } from "react-icons/lu";

const folder = <LuFolder />;

const file = <LuFileText />;

export function RightToLeft() {
  return (
    <Tree aria-label="المستندات" defaultExpandedKeys={["engineering"]} className="max-w-xs">
      <TreeItem id="engineering" label="الهندسة" branchIcon={folder} count="24">
        <TreeItem id="offer" label="خطاب العرض.pdf" leafIcon={file} />
      </TreeItem>
      <TreeItem id="finance" label="المالية" branchIcon={folder}>
        <TreeItem id="budget" label="الميزانية.xlsx" leafIcon={file} />
      </TreeItem>
    </Tree>
  );
}

Props 30

Press "Try it" on a card to load that prop into the playground.

label*Nexera

VisibleContent

Visible label, for example "Engineering" or "Offer letter.pdf". It wraps instead of truncating.

textValueNexera

string

Plain text of the label, used for type-ahead and as the row's accessible name. Required when label is not a string; include the count when it matters ("Engineering, 24 people").

branchIconNexera

ReactNode

Icon of a row that has child rows. 16 px, decorative; shown when provided.

leafIconNexera

ReactNode

Icon of a row without child rows. 16 px, decorative.

countNexera

string

Count after the label, for example "24". Visible only: the row is named by textValue, so add the count there when people need to hear it.

childrenNexera

ReactNode

Child rows: nested TreeItem elements. A row with children shows the expand and collapse chevron.

selectionLabelNexera

string

Name of the row's checkbox, read together with the row label ("Select Engineering"). The checkbox appears when the Tree has selectionMode="multiple". Translate it.

classNameNexera

string

Extra classes for the row, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style of the row.

hasChildItemsReact Aria

boolean

Whether this item has children, even if not loaded yet.

focusModeReact Aria

"child" | "row"

Whether the row or its first focusable child element should be focused when the row is focused.

allowsArrowNavigationReact Aria

boolean

Whether the row should support arrow key navigation even when the containing collection uses tab keyboard navigation. Allows users to navigate between rows with arrow keys while focus is on an interactive child element within the row.

idReact Aria

Key

The unique id of the tree row.

valueReact Aria

T

The object value that this tree item represents. When using dynamic collections, this is set automatically.

aria-labelReact Aria

string

An accessibility label for this tree item.

isDisabledReact Aria

boolean

Whether the item is disabled.

onActionReact Aria

() => void

Handler that is called when a user performs an action on this tree item. The exact user event depends on the collection's selectionBehavior prop and the interaction modality.

hrefReact Aria

string

A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

routerOptionsReact Aria

never

Options for the configured client side router.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

6 direct · 4 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.4Resize TextLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-disabled
data-hovered
data-selected

Usage

<TreeItem className="data-disabled:opacity-90 shadow-sm" />

Used in blocks

File browserLists, tables and records

Theme studio

TreeItem

Try every prop. Copy the code.

Examples 4

Single selection

Checkboxes

Deep and long

Right to left

Props 30

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components