Tree View
Folders and nested items with connector lines: expand and collapse, three-state checkboxes, search, drag & drop and a right-click menu. Plain JavaScript, built from a list or JSON.
Built from a nested <ul>. data-type sets the icon, data-opened opens a folder, data-disabled locks an item. Click to select, double-click or → ← to open and close.
- Home
- Services
- Web Design
- SEO & Content
- Hosting & Support
- About Us
- Our Team
- Careers
- Blog
- Five ideas for a calmer homepage
- Core Web Vitals in plain words
- Contact
- Online shop (external)
- Pricing 2025 (archived)
- Services
data-checkbox="true" adds three-state checkboxes: checking a folder checks everything in it, and a folder shows a dash when only part of it is checked. Example: what the Editor role may do.
- Content
- Pages
- View pages
- Create and edit pages
- Publish pages
- Delete pages
- Media library
- Upload files
- Delete files
- Edit menus
- Pages
- Users & roles
- View users
- Invite users
- Edit roles (administrators only)
- Settings
- General settings
- Languages
data-search="#input"
Matches are highlighted and their folders open; everything else is hidden. Try “logo” or “2026”.
- Images
- Brand
- logo.svg
- logo-white.svg
- favicon.png
- Homepage
- hero-banner-2026.jpg
- services-cover.jpg
- Team
- julia-fischer.jpg
- thomas-mueller.jpg
- Brand
- Documents
- price-list-2026.pdf
- privacy-policy.pdf
- brand-guidelines.docx
- Downloads
- logo-pack.zip
- annual-report-2025.pdf
Loaded from JSON (data-source). With data-dnd="true", drag an item onto another to move it inside, or above / below it to reorder. data-contextmenu="true": right-click (or Shift + F10) for New item, Rename and Delete; F2 renames.
Every change fires an odin:tree-* event on the tree — listen for them to save to your server. toJSON() returns the current tree.
Select, check, move, rename or delete an item above…