Tree view
Tailwind CSS Tree view
Use responsive tree view component with TW 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-twe-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-twe-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-twe-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-twe-collapse-item> <li class="ml-4 px-2"> <a data-twe-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-twe-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-twe-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-twe-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.