VTreeviewItem API

Props

name	type	default
`active`	boolean	undefined
Controls the active state of the item. This is typically used to highlight the component.
`active-class`	string	undefined
The class applied to the component when it matches the current route. Find more information about the active-class prop on the vue-router documentation.
`active-color`	string	undefined
Deprecated, use `color` instead.
`append-avatar`	string	undefined
Appends a v-avatar component after default content in the append slot.
`append-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component after default content in the append slot.
`base-color`	string	undefined
Sets the color of component when not focused.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control when in an active state or input-value is true - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page,
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`exact`	boolean	false
Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.
`has-custom-prepend`	boolean	false
MISSING DESCRIPTION (edit in github)
`height`	string \| number	undefined
Sets the height for the component.
`hide-actions` New in v3.9.0	boolean	false
Hide the expand icon and loading indicator next to each item title.
`href`	string	undefined
Designates the component as anchor and applies the href attribute.
`indent-lines` New in v3.9.0	('leaf' \| 'none' \| 'line' \| 'last-leaf' \| 'leaf-link')[]	undefined
Array of indent lines to render next to the item.
`index`	number	undefined
The index of the item within the treeview list.
`lines`	false \| 'one' \| 'two' \| 'three'	false
The line declaration specifies the minimum height of the item and can also be controlled from v-list with the same prop.
`link`	boolean	undefined
Designates that the component is a link. This is automatic when using the href or to prop.
`loading`	boolean	false
Places the v-treeview-item into a loading state.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`nav`	boolean	false
Reduces the width of v-list-item takes and adds a border radius.
`prepend-avatar`	string	undefined
Prepends a v-avatar component in the prepend slot before default content.
`prepend-gap`	string \| number	undefined
Sets the horizontal spacing between prepend slot and the main content. Also affects indent to ensure expected alignment of group children.
`prepend-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Creates a v-icon component in the prepend slot before default content.
`replace`	boolean	false
Setting replace prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`slim`	boolean	true
Reduces the vertical padding or height of the v-treeview-item, making it more compact.
`subtitle`	string \| number \| boolean	undefined
Specify a subtitle text for the component.
`tabindex`	string \| number	undefined
Controls the tabindex of the list item. When set, overrides the default tabindex behavior. Automatically set to -1 by VList when using `navigationStrategy="track"` to prevent Tab key navigation into items.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string \| number \| boolean	undefined
Generates a `v-list-item-title` component with the supplied value. Note that this overrides the native `title` attribute, that must be set with `v-bind:title.attr` instead.
`to`	string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric	undefined
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
`toggle-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	undefined
Allows customization of the icon used to toggle the expansion and collapse of treeview branches.
`value`	any	undefined
The value used for selection. Obtained from `v-list`’s `v-model:selected` when the item is selected.
`variant`	'flat' \| 'text' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'text'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`click`	[MouseEvent \| KeyboardEvent]
Event that is emitted when the component is clicked.
`toggleExpand`	[PointerEvent]
Emitted when the item is toggled to expand or collapse.

Slots

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
}

{ subtitle: string | number | boolean }

{ title: string | number | boolean }

{
  index: number
  depth: number
  path: number[]
  isFirst: boolean
  isLast: boolean
  isActive: boolean
  isOpen: boolean
  isSelected: boolean
  isIndeterminate: boolean
  isDisabled: boolean
  select: (value: boolean) => void
} & { props: { onClick: (e: PointerEvent) => void } } & { loading: boolean }

`append`
Adds an item inside the input and after input content.
`default`
The default Vue slot.
`prepend`
Adds an item outside the input and before input content.
`subtitle`
Slot for the component’s subtitle content.
`title`
Slot for the component’s title content.
`toggle` New in v3.10.0
Slot for custom expand icon and loading indicator.

Exposed

(activated: boolean, e: Event) => void

{}

boolean

boolean

boolean

{
  isLink: boolean
  isRouterLink: boolean
  isClickable: boolean
  href: string | undefined
  linkProps: Record<string, string | undefined>
  route: (RouteLocationGeneric & { href: string }) | undefined
  navigate:
    | ((e?: MouseEvent | undefined) => Promise<void | NavigationFailure>)
    | undefined
  isActive?: boolean | undefined
  isExactActive?: boolean | undefined
}

{
  filterable: boolean | (() => boolean)
  hasPrepend: boolean
  updateHasPrepend: (value: boolean) => void
  trackingIndex: number
  navigationStrategy: 'focus' | 'track'
  uid: string
}

{
  children: Map<unknown, unknown[]>
  parents: Map<unknown, unknown>
  disabled: Set<unknown>
  activatable: boolean
  selectable: boolean
  opened: Set<unknown>
  activated: Set<unknown>
  scrollToActive: boolean
  selected: Map<unknown, 'indeterminate' | 'off' | 'on'>
  selectedValues: unknown[]
  itemsRegistration: ItemsRegistrationType
  register: (
    id: unknown,
    parentId: unknown,
    isDisabled: boolean,
    isGroup?: boolean | undefined,
  ) => void
  unregister: (id: unknown) => void
  updateDisabled: (id: unknown, isDisabled: boolean) => void
  open: (id: unknown, value: boolean, event?: Event | undefined) => void
  activate: (id: unknown, value: boolean, event?: Event | undefined) => void
  select: (id: unknown, value: boolean, event?: Event | undefined) => void
  openOnSelect: (id: unknown, value: boolean, event?: Event | undefined) => void
  getPath: (id: unknown) => unknown[]
}

(selected: boolean, e: Event) => void

`activate`
Activate the list item.
`id`
The unique identifier of the list item.
`isActivated`
Check if the list item is activated.
`isGroupActivator`
Check if the list item activates a group.
`isSelected`
Check if the list item is selected.
`link`
Navigation information if list item functions as a link.
`list`
The reference to the parent list component.
`root`
The root nested list component
`select`
Select this list item.

#VTreeviewItem API

VTreeviewItem API