TreeMenu

TreeMenu component displays hierarchical navigation structures, commonly used in admin panel sidebar navigation.

---

Basic Usage

Pass menu configuration via :items prop. Supports icons, badges, and disabled states.

<TTreeMenu :items="[
  { label: 'Dashboard', icon: IconHome, href: '#', active: true },
  { label: 'Projects', href: '#', badge: '3' },
  { label: 'Content', icon: IconFileText, children: [
    { label: 'Articles', href: '#' },
    { label: 'Categories', href: '#' },
  ]},
  { label: 'Users', href: '#' },
  { label: 'Settings', href: '#', disabled: true },
]" />

---

Multi-level Nesting & Active Highlight

Supports unlimited nesting depth. Setting active: true on a child item will recursively highlight all parent items. In the example below, "📄 All Articles" is active, and its parent chain "Content" → "Articles" is automatically highlighted.

<TTreeMenu :items="[
  { label: 'Dashboard', icon: IconHome, href: '#' },
  { label: 'Content', icon: IconFileText, children: [
    { label: 'Articles', children: [
      { label: 'All Articles', href: '#', active: true },   ← currently active
      { label: 'Write', href: '#' },
    ]},
  ]},
]" v-model:expanded-keys="expandedKeys" />

---

Accordion Mode

accordion is true by default — only one parent node can be expanded at a time. Expanding a new node automatically collapses siblings.

<TTreeMenu :items="items" accordion />

---

Expand All

Set default-expand-all to expand all parent nodes by default.

<TTreeMenu :items="items" default-expand-all />

---

Dark Theme

Use with data-bs-theme="dark" for dark sidebar appearance.

<aside class="navbar navbar-vertical" data-bs-theme="dark">
  <div class="container-fluid">
    <TTreeMenu :items="items" />
  </div>
</aside>

---

API

TTreeMenu Props

Prop	Description	Type	Default
items	Tree menu data	TreeMenuItem[]	[]
accordion	Accordion mode (only one sibling expanded)	boolean	true
defaultExpandAll	Expand all nodes by default	boolean	false
expandedKeys	Expanded node keys (v-model)	(string | number)[]	[]
indent	Indent per level (px)	number	16
collapsible	Allow collapsing	boolean	true

TTreeMenu Emits

Emit	Parameters	Description
update:expandedKeys	keys: (string | number)[]	Expanded keys changed
select	item: TreeMenuItem	A leaf menu item selected
toggle	item: TreeMenuItem, expanded: boolean	Expand/collapse state changed

TreeMenuItem

Property	Type	Description
label	string	Display text
icon	Component	Icon component (@tabler/icons-vue)
href	string	Link URL
target	string	Link target
active	boolean	Active state (children's active cascades to parents)
disabled	boolean	Disabled state
badge	string | { text, color }	Badge (color is a bg-xxx class)
children	TreeMenuItem[]	Child menu items
key	string | number	Custom node key (for controlled expandedKeys)