# tree — Examples

## nested items

```html
<tree-ui>
  <tree-item-ui text="src" icon="folder">
    <tree-item-ui text="components" icon="folder">
      <tree-item-ui text="button.js" icon="file"></tree-item-ui>
      <tree-item-ui text="input.js" icon="file"></tree-item-ui>
      <tree-item-ui text="modal.js" icon="file"></tree-item-ui>
    </tree-item-ui>
    <tree-item-ui text="styles" icon="folder">
      <tree-item-ui text="tokens.css" icon="file"></tree-item-ui>
      <tree-item-ui text="styles.css" icon="file"></tree-item-ui>
    </tree-item-ui>
    <tree-item-ui text="index.js" icon="file"></tree-item-ui>
  </tree-item-ui>
</tree-ui>
```

## selection

```html
<tree-ui>
  <tree-item-ui text="Dashboard" icon="chart-bar"></tree-item-ui>
  <tree-item-ui text="Settings" icon="gear">
    <tree-item-ui text="General" icon="sliders"></tree-item-ui>
    <tree-item-ui text="Security" icon="lock"></tree-item-ui>
    <tree-item-ui text="Notifications" icon="bell"></tree-item-ui>
  </tree-item-ui>
  <tree-item-ui text="Profile" icon="user"></tree-item-ui>
  <tree-item-ui text="Help" icon="question"></tree-item-ui>
</tree-ui>
```

## expand / collapse

```html
<tree-ui>
  <tree-item-ui text="Page" icon="browser" open>
    <tree-item-ui text="Header" icon="layout">
      <tree-item-ui text="Logo" icon="image"></tree-item-ui>
      <tree-item-ui text="Navigation" icon="list"></tree-item-ui>
    </tree-item-ui>
    <tree-item-ui text="Hero Section" icon="image" open>
      <tree-item-ui text="Title" icon="text-aa"></tree-item-ui>
      <tree-item-ui text="Subtitle" icon="text-aa"></tree-item-ui>
      <tree-item-ui text="CTA Button" icon="cursor-click"></tree-item-ui>
    </tree-item-ui>
    <tree-item-ui text="Footer" icon="layout">
      <tree-item-ui text="Links" icon="link"></tree-item-ui>
      <tree-item-ui text="Copyright" icon="text-aa"></tree-item-ui>
    </tree-item-ui>
  </tree-item-ui>
</tree-ui>
```
