Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-tree-item>
A single node in a lit-material-tree — a row (chevron if it has
children, optional leading icon, label) plus a role="group" container
for nested lit-material-tree-item children, following the WAI-ARIA
[Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) pattern.
Properties
Property
Attribute
Type
Default
Description
expanded
expanded
boolean
false
selected
selected
boolean
false
Managed by the parent tree — never set by this element on itself.
disabled
disabled
boolean
false
depth
property only
number
none
How many lit-material-tree-item ancestors this node has — 0 for a top-level node.
hasChildren
property only
boolean
none
Whether this node has at least one direct lit-material-tree-item child.
parentTreeItem
property only
LitMaterialTreeItem | null
none
This node's parent node, if any — used by the tree for ArrowLeft "move to parent".
Events
Event
Description
toggle
Fires when expanded changes via user interaction, with detail: { expanded }.
Slots
Slot
Description
label
The node's label.
leading
An optional icon before the label.
default
Nested lit-material-tree-item children.
CSS parts
Part
Description
row
The node's own row (background/padding).
ripple
The state-layer element the hover/press feedback is drawn on.
focus-ring
The focus indicator element.
chevron
The expand/collapse button.
group
The container for nested children.
<lit-material-tree>
Groups lit-material-tree-item elements into a hierarchical tree, per the
WAI-ARIA [Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)
pattern — arrow-key navigation across every *visible* node (skipping the
contents of collapsed branches), and single- or multi-select coordination.
Properties
Property
Attribute
Type
Default
Description
multiple
multiple
boolean
false
Allows more than one node to be selected at once (each click toggles that node). Default: single-select.
Events
Event
Description
change
Fires when the selection changes via user interaction.