--- outline: deep --- # Tree Tree views present hierarchical data like file explorers, navigation menus, and taxonomies. Each node expands/collapses to reveal nested items and can be selected in several ways. **``** — Custom Element · Shadow DOM ## Options ### Basic Wrap `` nodes inside ``. Nested `` children become sub-nodes automatically. ```html Documents Photos beach.jpg mountain.jpg Invoices january.pdf february.pdf Projects luxen-ui website Downloads ``` ### Custom icons Place any element in the `prefix` slot to render a leading icon before the label. Icons inherit the current text color. ```html src components Button.ts Tree.ts package.json README.md public logo.svg ``` ### Custom expand icons Override the `expand-icon` and `collapse-icon` slots to show a different icon per state — e.g. a closed folder when the branch is collapsed and an open folder when expanded. Leaves keep the `prefix` slot for their own icon. ```html src components Button.ts Tree.ts package.json README.md ``` ### Multiple selection Set `selection="multiple"` to render a native checkbox on every item. Toggling a parent cascades the selection to its descendants and sets the indeterminate state when only some children are selected. ```html Fruits Apple Banana Cherry Vegetables Carrot Lettuce ``` ### Independent selection Add `independent` to decouple parents and children: a parent can be selected without ticking any of its descendants and vice-versa. Useful when nodes represent independent concepts (categories, tags, permissions) rather than aggregations. ```html Region: Europe France Germany Italy Region: Americas Brazil United States ``` ### Leaf-only selection Set `selection="leaf"` when only terminal nodes represent selectable values. Clicking a branch only toggles its expansion. ```html Components Button Dropdown Tree Tokens Colors Spacing ``` ### Disabled items Add `disabled` to any item to prevent selection and interaction. The item remains visible and part of the structure. ```html Settings Profile Billing (locked) Notifications ``` ### Lazy loading Add `lazy` to an item whose children will be fetched on first expand. The component emits `lazy-load`; set `loading` to render a spinner in place of the chevron, then append children and remove `lazy`. ## Examples ### Row actions Place any interactive element inside a `` to expose per-row actions (e.g. an `` menu, a button, a link). Clicks on `