Tree view
Tailwind CSS Tree view
Use responsive tree view component with Tailwind Elements. Tree view shows hierarchical information which starts from the root item and proceeds to its children.
Basic example
To get a tree view use the collapse component.
- One
- Two
-
Three
- Second-one
- Second-two
-
Second-three
-
Third-one
- Fourth-one
- Fourth-two
- Fourth-three
- Third-two
-
Third-three
- Fourth-one
- Fourth-two
- Fourth-three
-
Third-one
<ul>
<li class="px-2 hover:bg-secondary-100">One</li>
<li class="px-2 hover:bg-secondary-100">Two</li>
<li>
<a
data-te-collapse-init
href="#collapseThree"
role="button"
aria-expanded="false"
aria-controls="collapseThree"
class="flex items-center px-2 hover:bg-secondary-100 focus:text-primary active:text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor"
class="h-4 w-4">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
Three
</a>
<ul
class="!visible hidden"
id="collapseThree"
data-te-collapse-item>
<li class="ml-4 px-2 hover:bg-secondary-100">Second-one</li>
<li class="ml-4 px-2 hover:bg-secondary-100">Second-two</li>
<li class="ml-4">
<a
data-te-collapse-init
href="#collapseSecondThree"
role="button"
aria-expanded="false"
aria-controls="collapseSecondThree"
class="flex items-center px-2 hover:bg-secondary-100 focus:text-primary active:text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor"
class="h-4 w-4">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
Second-three
</a>
<ul
class="!visible hidden"
id="collapseSecondThree"
data-te-collapse-item>
<li class="ml-4 px-2">
<a
data-te-collapse-init
href="#collapseThirdOne"
role="button"
aria-expanded="false"
aria-controls="collapseThirdOne"
class="flex items-center px-2 hover:bg-secondary-100 focus:text-primary active:text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor"
class="h-4 w-4">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg
>Third-one
</a>
<ul
class="!visible hidden"
id="collapseThirdOne"
data-te-collapse-item>
<li class="ml-4 px-2 hover:bg-secondary-100">
Fourth-one
</li>
<li class="ml-4 px-2 hover:bg-secondary-100">
Fourth-two
</li>
<li class="ml-4 px-2 hover:bg-secondary-100">
Fourth-three
</li>
</ul>
</li>
<li class="ml-4 px-2 hover:bg-secondary-100">Third-two</li>
<li class="ml-4">
<a
data-te-collapse-init
href="#collapseThirdThree"
role="button"
aria-expanded="false"
aria-controls="collapseThirdThree"
class="flex items-center px-2 hover:bg-secondary-100 focus:text-primary active:text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2.5"
stroke="currentColor"
class="h-4 w-4">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg
>Third-three
</a>
<ul
class="!visible hidden"
id="collapseThirdThree"
data-te-collapse-item>
<li class="ml-4 px-2 hover:bg-secondary-100">
Fourth-one
</li>
<li class="ml-4 px-2 hover:bg-secondary-100">
Fourth-two
</li>
<li class="ml-4 px-2 hover:bg-secondary-100">
Fourth-three
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Related resources
Collapse
Accordion
Select
Checkbox
Dropdown
List group
Inputs
Overflow
Display none
Visibility hidden
If you are looking for more advanced options, try tree view from MDBootstrap.