component

TuxTree

Hierarchical list. Native (not a UTree wrapper) — the visual is brand-specific (maroon expand markers, maroon left bar for selection, optional sand guide lines under expanded branches), and the keyboard semantics are simple enough to own. Built for sitemap / IA explorers, corpus + filesystem browsers, and BI dataset hierarchies (the ADR-0009 direction).

navigation

Sitemap browser

Each leaf is a real route. Click a branch to toggle; click a leaf to navigate. badge renders the small pill on the right (counts, version tags, status).

  • Design
    • Doctrine
    • Components
    • Palette
    • Roadmapv1.3
  • Foundations
    • Tokens
    • Typography
    • Style variants
    • Icons1.7K
  • Composition
    • Patterns
    • UI kits
    • Markdown
<TuxTree :items="sitemap" />

paths + ids

Corpus / filesystem browser

Set mono: true on a node to render its label in JetBrains Mono with the maroon-on-sunken inline-code rhythm — reads as a machine path rather than editorial copy. show-guides draws a 1px sand guide line under expanded branches so deep nesting stays scan-able.

  • grants-2024/
<!-- mono: true on each row renders the label in JetBrains Mono -->
<TuxTree :items="corpus" :show-guides="true" />

selection

BI dataset hierarchy

Drive a focused-field panel via v-model:selected. Selected row gets the maroon left bar + maroon label tint — same affordance shape as .tux-cmd__item--active for cross-component recognisability. The storage-key prop persists the expanded set in sessionStorage, so navigating away and back keeps the explorer's posture.

  • RELLIS Field Tests · FY2412.4M rows · refreshed 4h ago

selected field

sen-value

Drives a real focused-field panel in BI explorer surfaces — field metadata, sample values, downstream visuals. 

<TuxTree
  :items="dataset"
  v-model:selected="selectedField"
  storage-key="bi-explorer-dataset"
/>

props

Props

  • items — array of TreeItem. Required.
  • defaultExpanded — initial set of expanded node IDs. Defaults to every root-level item.
  • storageKey — sessionStorage key for persistence. Omit to disable.
  • showGuides — sand guide lines under expanded branches. Defaults true.
  • v-model:selected — currently-selected node ID. Optional.
  • ariaLabel — passed to the root tree role. Defaults to "Tree".
  • Exposes expandAll() + collapseAll() via template ref.

Each TreeItem carries { id, label, icon?, description?, mono?, to?, href?, badge?, children? }. Pass to for internal nav (renders a <NuxtLink>), href for external, or leave both off for a pure-toggle row that emits selection.