webdevpuneet.com

Related Snippets

101 in Navigation category
1–6 of 60

File Tree Explorer

Liquid Glass Navbar

Fuse.js Fuzzy Command Palette

Tippy.js Dropdown Menu with Submenus

ScrollOut Progress Nav Dots

Velocity.js Elastic Menu

Tree Menu — Free HTML CSS JS Snippet

Collapsible Tree Menu · Navigation · Plain HTML, CSS & JS · Live preview

CategoryNavigation
TagsSVGAccessibility

Copy & paste

Source Code

<div class="page">
  <div class="sidebar-panel">
    <div class="panel-head">
      <div class="panel-title">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
        Files
      </div>
      <button class="collapse-all" onclick="collapseAll()" title="Collapse all">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
      </button>
    </div>

    <ul class="tree" id="tree" role="tree">
      <li class="tree-node folder open" role="treeitem" aria-expanded="true">
        <div class="node-row" onclick="toggle(this)">
          <svg class="chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
          <svg class="node-icon" width="13" height="13" viewBox="0 0 24 24" fill="#f59e0b" stroke="#f59e0b" stroke-width="0"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
          <span class="node-label">src</span>
        </div>
        <ul class="subtree">
          <li class="tree-node folder open" role="treeitem" aria-expanded="true">
            <div class="node-row" onclick="toggle(this)">
              <svg class="chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
              <svg class="node-icon" width="13" height="13" viewBox="0 0 24 24" fill="#f59e0b" stroke="#f59e0b" stroke-width="0"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
              <span class="node-label">components</span>
            </div>
            <ul class="subtree">
              <li class="tree-node file active" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">⚛</span><span class="node-label">Button.jsx</span></div></li>
              <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">⚛</span><span class="node-label">Card.jsx</span></div></li>
              <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">⚛</span><span class="node-label">Modal.jsx</span></div></li>
            </ul>
          </li>
          <li class="tree-node folder" role="treeitem" aria-expanded="false">
            <div class="node-row" onclick="toggle(this)">
              <svg class="chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
              <svg class="node-icon" width="13" height="13" viewBox="0 0 24 24" fill="#f59e0b" stroke="#f59e0b" stroke-width="0"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
              <span class="node-label">pages</span>
              <span class="node-count">3</span>
            </div>
            <ul class="subtree">
              <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">📄</span><span class="node-label">index.js</span></div></li>
              <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">📄</span><span class="node-label">about.js</span></div></li>
              <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">📄</span><span class="node-label">api.js</span></div></li>
            </ul>
          </li>
          <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">🎨</span><span class="node-label">globals.css</span></div></li>
        </ul>
      </li>
      <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">⚙️</span><span class="node-label">package.json</span></div></li>
      <li class="tree-node file" role="treeitem"><div class="node-row leaf" onclick="selectFile(this)"><span class="node-icon-leaf">📝</span><span class="node-label">README.md</span></div></li>
    </ul>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

max-height: 0→1000px transition on .subtree — smooth expand without JS height calculation
chevron rotate(90deg) driven by .open class on folder node
selectFile(): removes .active from all files, adds to clicked file
collapseAll(): finds all .open folders and closes them in one pass
Progressive indentation: CSS descendant selectors for each nesting level
ARIA: role=tree/treeitem, aria-expanded toggled on open/close
.closed class added to collapsed subtrees on init (from :not(.open) folders)
node-count badge on folder nodes shows child file count

About this UI Snippet

Collapsible Tree Menu — Folder Toggle, max-height Animation, Active File & Collapse All

Screenshot of the Collapsible Tree Menu snippet rendered live

Open a file explorer with two thousand files dumped into one flat list and you'd never find anything — fold the same two thousand into folders-within-folders, and suddenly they're navigable, because at any moment you only have to look at the dozen or so that share your current context. This snippet builds that exact structure: a nested list of folders and files, each folder a click away from expanding or collapsing with a smooth height animation, a chevron that rotates to mirror its state, single-file selection, and a "collapse all" shortcut for when a dozen open folders have turned the sidebar into its own thing to scroll through.

Animating a height nobody can know in advance

CSS transitions height cleanly between two known values, but a folder's expanded height depends entirely on how many files and subfolders happen to be inside it — a number this snippet has no way to know ahead of time. The workaround is max-height: collapsed subtrees sit at max-height: 0 with overflow: hidden, and .open ones jump to max-height: 1000px — not because any real subtree is that tall, but because it's comfortably larger than any realistic one. transition: max-height 0.25s ease animates between the two, and because the browser only ever paints the *actual* content height, the motion reads as if it's measuring the real size, even though it's really racing toward an arbitrary ceiling and stopping early. It's the same trick the Accordion / FAQ snippet leans on to expand its answer panels.

One class name driving two animations at once

toggle() does exactly one meaningful thing: it flips .open on the folder's list item. Everything visible after that — the subtree sliding open via max-height, and the chevron rotating via transform: rotate(90deg) on .tree-node.folder.open .chevron — is pure CSS reacting to that single class change. There's no separate "now rotate the chevron" call to keep in sync with "now expand the subtree": if one fires, so does the other, because both are just selectors watching the same toggle land.

Indentation that comes from nesting, not from counting

Working out how deep a node sits and assigning it a matching padding-left in JavaScript would mean walking the tree and threading a depth counter through every recursive call. This snippet skips that bookkeeping with descendant selectors instead: .subtree .node-row gets one padding value, .subtree .subtree .node-row gets a larger one, and so on — the *selector itself* encodes the nesting depth, so a folder three levels down ends up indented correctly purely because of where its markup physically sits in the document.

Selecting one file, and only one

selectFile() opens by stripping .active from every node that currently carries it — document.querySelectorAll('.tree-node.file.active').forEach(n => n.classList.remove('active')) — and only then adds it to the file just clicked. That "clear everything, then set the one thing" order is the simplest possible way to guarantee a single-selection invariant: there's no special case for "what if two were already active," because the first line makes that state impossible to reach. Right-click a node in a real file explorer, though, and you'd expect a menu of actions to appear — precisely what the Context Menu snippet adds on top of a tree like this one.

Closing everything in one pass

collapseAll() runs the inverse of toggle() across every currently open folder at once — stripping .open, adding .closed to each subtree, and resetting aria-expanded back to "false". It's a short function, but it fixes a real annoyance: after wandering deep into a tree, getting back to a clean overview shouldn't mean clicking a dozen folders shut by hand, one breadcrumb at a time.

Step by step

How to Use

  1. 1
    Click folder names to expand or collapseClicking any folder row toggles it open or closed with a smooth max-height animation. The chevron rotates 90 degrees to indicate the state. Click the collapse-all icon to close all open folders at once.
  2. 2
    Click file names to select themClicking a file highlights it with an indigo background (active state). Only one file can be active at a time. The active file remains highlighted until another is clicked.
  3. 3
    Update the tree structure with your own filesAdd .tree-node.folder li elements for directories and .tree-node.file li elements for files. Nest .subtree ul lists inside folder nodes. Update .node-icon-leaf emojis or SVG icons to match your file types.
  4. 4
    Add more nesting levelsThe CSS handles up to 3 nesting levels via .subtree selectors. For deeper nesting, add .subtree .subtree .subtree .node-row { padding-left: 54px; } and extend the pattern.
  5. 5
    Add right-click context menuListen for contextmenu on each .node-row: row.addEventListener("contextmenu", e => { e.preventDefault(); showContextMenu(e, node); }). See the Context Menu snippet in the Navigation category for the full implementation.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component with an items array prop, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

IDE and code editor file tree sidebar
The file tree pattern is the primary navigation in VS Code, JetBrains, and every modern code editor. Use this snippet as the foundation for a browser-based code editor sidebar.
Design system component and asset browser
Design systems have hierarchical component categories (Forms > Inputs > Text Input). The tree menu navigates the hierarchy efficiently. Active file selection highlights the currently viewed component.
Documentation and knowledge base sidebar navigation
Technical documentation sites (like Stripe, Tailwind CSS) use collapsible tree navigation for API references and guides. The collapse-all button is essential when users have many sections open.
Settings panel with nested categories
Admin panel settings have parent categories (Security > Authentication > Password Policy). The tree menu handles arbitrary nesting depth with consistent visual indentation and smooth animations.
Study max-height CSS animation for unknown heights
The max-height trick for animating unknown content heights (folder subtrees of unpredictable size) is a fundamental CSS technique. This snippet demonstrates the pattern clearly — set a max-height larger than any realistic content, animate from 0 to that value.
File manager and cloud storage browser UI
Cloud storage UIs (Dropbox, Google Drive) use tree views for folder navigation. Folder expand shows children; collapse hides them. Active selection drives a content panel showing the selected folder or file details.

Got questions?

Frequently Asked Questions

Subtrees have max-height: 1000px when open (which accommodates any realistic tree depth) and max-height: 0 when closed. CSS transition: max-height 0.25s ease animates between these values. The browser interpolates from 0 to 1000px — even though the actual content might only be 120px, the transition appears to stop when the content is fully visible. The trade-off: the closing animation is always 0.25s regardless of actual height, which can feel slightly off for very deep trees.

Define a buildTree(nodes, container) function that iterates an array of {name, type, children} objects. For folders: create an li with .tree-node.folder, add a .node-row div, create a .subtree ul, and recurse. For files: create an li with .tree-node.file and a .node-row.leaf div. Append each li to the container. Call toggle(row) event listeners after generation. This pattern renders any nested data structure as a tree UI.

Add a keydown listener to the tree: for ArrowDown, find the next visible node and focus it. For ArrowUp, find the previous visible node. For ArrowRight, expand the current folder. For ArrowLeft, collapse the current folder or move to its parent. For Enter, select the current item. Track the focused node with a data-focused attribute. Apply focus styles with .node-row:focus-visible rules.

Click "JSX" to download. Define a TreeNode component that accepts name, type, and children props. Manage open state with useState(initiallyOpen). The subtree div has style={{ maxHeight: open ? 1000 : 0, overflow: "hidden", transition: "max-height 0.25s ease" }}. For file selection, lift the selectedFile state to the parent Tree component and pass setSelected as a callback.

Yes. While the Collapsible Tree Menu snippet gives you one pattern to copy, the free Responsive Navbar Builder at webdevpuneet.com/navbar-builder/ designs a whole navigation bar: logo, links and dropdown menus, a mobile hamburger menu (dropdown panel, slide-in drawer or full screen) and a scroll effect (sticky, shrink, hide on scroll or transparent). It has six presets, a live preview that runs the real code, and exports HTML + CSS + vanilla JS, React, Tailwind, Vue 3 or Angular — or you can click Fork & Edit to keep editing it in My Code.