Tree Views – 8 Free CSS, Bootstrap & Tailwind Sets
Tree Views is a pack of eight sets of tree components, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .card, .nav, .badge, .breadcrumb and .form-check-input where they fit, and Tailwind CSS 4. The sets cover pure CSS trees built on details and summary with connector lines, file explorers that follow the WAI-ARIA tree pattern, checkbox trees with tri-state parents, documentation and help-centre sidebars, org charts that turn from a top-down chart into an indented list on phones, searchable trees, a dark code-editor set and a modern CSS set built on nesting, :has(), ::details-content and the details name attribute. Four sets need no JavaScript; the other four use a short block of vanilla JavaScript and no libraries.
A good tree view lets people see where they are and move without a mouse. Use the simplest structure that does the job: a nested list of links with details and summary is right for navigation and site maps, while a role="tree" widget is for app-like explorers where items are selected, and then it has to implement the whole keyboard model, with one tab stop, arrow keys, Home and End and type-ahead. Each branch should say whether it is open, the current page should carry aria-current, and parent checkboxes should show a mixed state when only some children are checked. Indentation alone is easy to lose in a deep tree, so guides or connector lines help, and on a phone a wide chart should become an indented list instead of scrolling sideways.
