component

TuxDocsSidebar

Hierarchical sidebar for documentation sites — distinct from the flat catalog sidebar in the style guide. Collapsible parent sections via native <details>, inline search filtering with match highlighting, sessionStorage-persisted collapse state. The active item renders as a soft pink pill; neutral indent guides + horizontal connector ticks carry the parent-child structure. Same visual pattern as the production docs.tti.tamu.edu and docs.it.tamu.edu sidebars.

visual language

Indent guides + connector ticks

Each nesting level renders a thin vertical guide line on the left of its children — that's the indent guide. Every child gets a short horizontal tick connecting from the guide to its row, so the parent-child relationship is unambiguous without going full ASCII tree. Both stay neutral gray; the active item alone carries the "you are here" affordance.

The demo below has its Search API entry wired to /components/docs-sidebar — this very page. That entry renders as a maroon-tinted pill so you can see the active treatment in context, with the section heading "Index" picking up the brand color above it.

canonical

Landscape-shaped tree · 5 sections

Type in the filter to narrow the tree — matches highlight in labels and parent groups expand to reveal hits. The "Search API" link is wired live to this page so you can see the active treatment. 

<TuxDocsSidebar
  title="Landscape docs"
  :tree="[
    { label: 'Get started', children: [...] },
    { label: 'Agent',       children: [...] },
    { label: 'Index',       children: [...] },
  ]"
/>

production wiring

Three-column doc layout

The canonical pattern: TuxDocsSidebar on the left, TuxBreadcrumbs + article in the middle, TuxTOC on the right. Wire it once in a Nuxt layout (layouts/docs.vue) and any page declaring definePageMeta({ layout: "docs" }) gets the full chrome.

layouts/docs.vuevue
<template>
  <div class="docs-layout">
    <aside>
      <TuxDocsSidebar :tree="docsTree" />
    </aside>
    <main>
      <TuxBreadcrumbs :trail="crumbs" />
      <article>
        <slot />
      </article>
    </main>
    <aside class="toc">
      <TuxTOC />
    </aside>
  </div>
</template>

<style>
.docs-layout {
  display: grid;
  grid-template-columns: 16rem 1fr 14rem;
  gap: 2.5rem;
  max-width: 84rem;
  margin: 0 auto;
}
@media (max-width: 64rem) {
  .docs-layout { grid-template-columns: 1fr; }
}
</style>

props

Props + tree shape

  • tree — array of { label, to?, icon?, children? }. Required.
  • title — heading above the tree. Defaults to "Docs".
  • search — show inline filter input. Defaults to true.
  • searchPlaceholder — placeholder text. Defaults to "Filter docs…".
  • storageKey — sessionStorage key for collapse persistence. Set null to disable.
  • Section without to + children — renders as a non-link parent. The tree expands when an active descendant matches the current route.