Tree

Web components for ARIA tree views of nested items to browse, open and select, plus the controller for custom trees.

A hierarchy to browse and select from, written as nested mo-tree-items.

Installation

npm install @3mo/tree

import '@3mo/tree'

Usage

<mo-tree style='max-width: 24rem'>
	<mo-tree-item value='documents' icon='folder'>
		Documents
		<mo-tree-item value='taxes' icon='folder'>
			Taxes
			<mo-tree-item value='2025.pdf' icon='picture_as_pdf'>2025.pdf</mo-tree-item>
			<mo-tree-item value='2026.pdf' icon='picture_as_pdf'>2026.pdf</mo-tree-item>
		</mo-tree-item>
		<mo-tree-item value='notes.md' icon='description'>Notes.md</mo-tree-item>
	</mo-tree-item>
	<mo-tree-item value='pictures' icon='folder'>
		Pictures
		<mo-tree-item value='beach.jpg' icon='image'>Beach.jpg</mo-tree-item>
	</mo-tree-item>
	<mo-tree-item value='readme.txt' icon='description'>Readme.txt</mo-tree-item>
</mo-tree>

Examples

• Selection — Without selectability a click opens a row; with single or multiple it selects, and the chevron opens.
• Initial State — An item's open and selected set where it starts, and a disabled one is neither selected nor reached by the keyboard.
• Controlled — The selection is the tree's value and what is open each item's own open, both held in state here.
• Methods — expandAll(), collapseAll(), selectAll() and deselectAll() act on the whole tree, and reveal() opens the way to an item.
• Slots — icon takes a Material icon, which the start slot replaces; the end slot places content after the label.
• Overflow — A label that does not fit is truncated with an ellipsis.
• Keyboard — Arrows move and open, Home and End jump, * opens every sibling, Space selects, Shift+arrows extend, Ctrl+A selects all and typing jumps to a matching item.
• Parts — ::part(row) sets a row's height, indentation and guide lines, and ::part(group) the slide of the nested items: the default, a dense tree, and one without guides or motion.
• Controller — TreeController alone, on plain divs: the host supplies the roots and their children, and hides a closed item's children itself.

Accessibility

A tree, with aria-multiselectable while multiple. Items are treeitems with aria-level, aria-setsize and aria-posinset, aria-expanded on parents, aria-selected while the tree has a selectability, and aria-disabled; children sit in a group. Focus roves over the visible items.

| Key | Does | | --- | --- | | ArrowDown ArrowUp | The next or previous visible item. | | ArrowRight | Opens a closed parent, or moves to the first child of an open one. | | ArrowLeft | Closes an open parent, or moves to the parent. | | Home End, PageUp PageDown | The first or last visible item, or a page further. | | * | Opens every sibling of the item. | | A letter | Typeahead. | | Enter | Clicks the item: selects it, or opens and closes a parent while the tree has no selectability. | | Space | With a selectability: selects the item, or toggles it while multiple. | | Shift + an arrow, Ctrl A | Multiple: extends the selection, or selects all. |

The arrows stop at the ends rather than wrapping. Name the tree with aria-label or aria-labelledby.

API

mo-tree

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | items | | TreeItem[] | | The root items. | | selectability | selectability | Selectability \| undefined | | single or multiple; unset, items are not selectable and a click opens instead. | | value | value | string \| string[] \| undefined | | The selected item, or the selected items while multiple. |

Events

| Name | Detail | Description | | --- | --- | --- | | change | string \| string[] \| undefined | The new value, whenever the selection changes through the tree. |

Slots

| Name | Description | | --- | --- | | (default) | The items. |

mo-tree-item

A row of a mo-tree and the group of the mo-tree-items nested in it.

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | items | | TreeItem[] | | The nested items. | | value | value | string \| undefined | | What the tree reports this item as. An item without one is not in the tree's value. | | open | open | boolean | false | Whether the nested items are shown. | | selected | selected | boolean | false | Whether the item starts out selected. | | disabled | disabled | boolean | false | Neither navigable nor selectable. | | icon | icon | MaterialIcon \| undefined | | An icon before the content. |

Events

| Name | Detail | Description | | --- | --- | --- | | openChange | boolean | Whether the nested items are shown, whenever that changes. It bubbles, which is how the tree follows its items. |

Slots

| Name | Description | | --- | --- | | (default) | The content of the row. | | start | Placed before the content, in place of the icon. | | end | Placed after the content. | | children | The nested items, which a mo-tree-item child joins on its own. |

CSS parts

| Name | Description | | --- | --- | | row | The row: the item without its nested items. | | indicator | The chevron which opens and closes the row. | | group | What the nested items sit in, and what slides and fades as the row opens and closes. |

Links

• Documentation
• Changelog
• Source

License

MIT © 3MO GmbH