Tree generator
Account hierarchies, folder structures and category trees use lightning-tree’s expand/collapse pattern. Style indentation, the selected-row highlight and chevron color so deep hierarchies stay scannable.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-tree
header="Account Hierarchy"
items={items}
selected-item={selectedItem}
class="studio-tree"
onselect={handleSelect}
></lightning-tree>
</template>Design tips for trees
- Keep indentation between 16–24px per level — tighter and levels blur together, looser and deep trees run off the panel.
- Use the same selected-row treatment here as in your vertical navigation for visual consistency across the app.
- Auto-expand the path to a selected/active node on load so users don’t have to manually drill down to see their own selection.
Related components
Components developers commonly compare against or pair with Tree.