Tree

A lightning-tree component displays visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items are displayed as hyperlinks and items in the hierarchy can be nested. Items with nested items are also known as branches.

This component implements styling from trees in the Lightning Design System.

To create a tree, pass in an array of key-value pairs to the items attribute.

Here's an example of a tree with more than one level of nesting. To retrieve the selected item Id, use the onselect event handler. The select event is also fired when you select an item with an href value.

Define the tree items in your JavaScript file. Use the detail property to retrieve the name of the selected tree item.

You can add or remove items in a tree. Let's say you have a tree that looks like this, with a button to add a nested item to the tree.

Define the items in your JavaScript code.

This example handleClick() function adds a nested item at the end of the tree when the button is clicked.

When providing an href value to an item, the onselect event handler is triggered before navigating to the hyperlink.

To select a tree item using JavaScript, pass in the tree item name using selected-item.

This example selects the United States Sales tree item on load. Press the Change Selected button to select the Americas tree item.

Define the items in your JavaScript code and pass in the selected item name.

To expand and collapse a branch programmatically, get the tree items and update its expanded property.

Use lightning-tree if your app has layered navigation that can’t be represented in a simple tab set. A tree helps users navigate to pages and quickly find a nested child page without loading each page.

You can use lightning-tree with lightning-breadcrumbs to further help users navigate the hierarchy.

Trees can have unlimited nesting, but we recommend flatter trees as they are generally easier to navigate.

Not all items in the list need a corresponding page. Instead, you can group related pages together using a label header without providing an unnecessary landing page.

You can use the keyboard to navigate the tree. Tab into the tree and use the Up and Down Arrow key to focus on tree items. To collapse an expanded branch, press the Left Arrow key. To expand a branch, press the Right Arrow key. Pressing the Enter key or Space Bar is similar to an onclick event, and performs the default action on the item.

select

The event fired when a tree item is selected and before navigating to a given hyperlink.

The select event returns the following parameter.

The event properties are as follows.

The LWC Recipes GitHub repository contains code examples for Lightning Web Components that you can test in an org.

For a recipe that uses lightning-tree, see the c-wire-get-picklist-values-by-record-type component in the LWC Recipes repo.