Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded
and collapsed as desired by the user.
Deciduous
Birch
Maple
Field mapleRed mapleSugar mapleOakWalnut
Coniferous
Cedar
Pine
Eastern white pinePonderosa pineScots pineSpruceFir
Tropical
BanyanCoconut palmMahoganyTeak
<cs-treestyle="--indent-guide-width: 1px;"><cs-tree-itemexpanded>
Deciduous
<cs-tree-item>Birch</cs-tree-item><cs-tree-itemexpanded>
Maple
<cs-tree-item>Field maple</cs-tree-item><cs-tree-item>Red maple</cs-tree-item><cs-tree-item>Sugar maple</cs-tree-item></cs-tree-item><cs-tree-item>Oak</cs-tree-item><cs-tree-item>Walnut</cs-tree-item></cs-tree-item><cs-tree-item>
Coniferous
<cs-tree-item>Cedar</cs-tree-item><cs-tree-item>
Pine
<cs-tree-item>Eastern white pine</cs-tree-item><cs-tree-item>Ponderosa pine</cs-tree-item><cs-tree-item>Scots pine</cs-tree-item></cs-tree-item><cs-tree-item>Spruce</cs-tree-item><cs-tree-item>Fir</cs-tree-item></cs-tree-item><cs-tree-item>
Tropical
<cs-tree-item>Banyan</cs-tree-item><cs-tree-item>Coconut palm</cs-tree-item><cs-tree-item>Mahogany</cs-tree-item><cs-tree-item>Teak</cs-tree-item></cs-tree-item></cs-tree>
Examples
Selection
Set the selection attribute to change what a tree lets you select.
Trees inherit their font size by default. You can change the size of a tree and all of its items by setting font-size on the <cs-tree> element. All internal dimensions, including checkboxes, expand buttons, and labels, scale proportionally.
Small
Newsletters
Promotions
Weekly dealsSeasonal sales
Default
Newsletters
Promotions
Weekly dealsSeasonal sales
Large
Newsletters
Promotions
Weekly dealsSeasonal sales
Set the --indent-guide-width custom property to draw indent guides. The --indent-guide-color, --indent-guide-style, and --indent-guide-offset custom properties tune their color, style, and offset.
Design
Brand
ColorsTypographyLogo
Components
ButtonsFormsNavigation
Development
FrontendBackendInfrastructure
Marketing
Social MediaEmail CampaignsAnalytics
Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively. To disable the animation, override the rotate property on the expand-button part as shown below.
Recipes
Breakfast
PancakesOmeletteGranola
Lunch
Caesar saladGrilled chicken wrap
Dinner
Pasta carbonaraStir fryRoasted salmon
Desserts
Chocolate cakeTiramisuFruit tart
Use the lazy attribute on a tree item to indicate that the content is not yet present and will be loaded later. When the user tries to expand the node, the loading state is set to true and the cs-lazy-load event will be emitted to allow you to load data asynchronously. The item will remain in a loading state until its content is changed.
If you want to disable this behavior after the first load, remove the lazy attribute and, on the next expand, the existing content will be shown instead.
Remote Repositories
<cs-tree><cs-tree-itemlazy>Remote Repositories</cs-tree-item></cs-tree><scripttype="module">const lazyItem = document.querySelector('cs-tree-item[lazy]');
lazyItem.addEventListener('cs-lazy-load',()=>{// Simulate fetching data from a serversetTimeout(()=>{const repos =['design-system','marketing-site','mobile-app','api-gateway'];for(const repo of repos){const treeItem = document.createElement('cs-tree-item');
treeItem.innerText = repo;
lazyItem.append(treeItem);}// Disable lazy mode once the content has been loaded
lazyItem.lazy =false;},1000);});</script>
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import
needed. To cherry-pick this component, use one of the following snippets.
The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected. Leaf-multiple allows multiple leaf nodes to be selected while parent nodes only expand and collapse.
