Dropdown

Dropdowns display a list of actionable items. They support icons, separators, group headers, active/disabled states, badges, avatars, checkboxes/radios, dark themes, and more.

Basic Usage

Pass an array of menu items via the items prop, or use the default slot for custom content.

vue


<TDropdown>
  <template #trigger-text>Open Menu</template>
  <TDropdownItem>Action</TDropdownItem>
  <TDropdownItem>Another Action</TDropdownItem>
</TDropdown>

Dividers & Group Headers

Use the divider and header props on TDropdownItem, or raw HTML class names to divide menu groups.

Show Code

vue

<!-- Raw HTML approach -->
<TDropdown>
  <template #trigger-text>Divider</template>
  <TDropdownItem>Action</TDropdownItem>
  <TDropdownItem divider/>
  <TDropdownItem>Separated Link</TDropdownItem>
</TDropdown>

<!-- TDropdownItem component approach (recommended) -->
<TDropdown>
  <template #trigger-text>Component Way</template>
  <TDropdownItem>Action</TDropdownItem>
  <TDropdownItem divider/>
  <TDropdownItem header text="Group Title"/>
  <TDropdownItem>Another Action</TDropdownItem>
</TDropdown>

States

Active State

Use the active prop to highlight a menu item.

vue


<TDropdown>
  <template #trigger-text>Active State</template>
  <TDropdownItem active>Currently Selected</TDropdownItem>
</TDropdown>

Disabled State

Use the disabled prop to disable a menu item.

vue


<TDropdown>
  <TDropdownItem disabled>Disabled Item</TDropdownItem>
</TDropdown>

With Icons

Each menu item accepts an icon field in the items prop, passing a component from @tabler/icons-vue.

Show Code

vue


<script setup>
  import {IconSettings, IconEdit, IconActivity, IconLogout} from '@tabler/icons-vue'
</script>

<template>
  <TDropdown :items="[
    { text: 'Activity', icon: IconActivity },
    { text: 'Edit', icon: IconEdit },
    { text: 'Settings', icon: IconSettings },
    { divider: true },
    { text: 'Logout', icon: IconLogout },
  ]">
    <template #trigger-text>Icon Menu</template>
  </TDropdown>
</template>

With Arrow

Set the arrow prop to display an arrow pointing at the trigger.

vue


<TDropdown arrow>
  <template #trigger-text>With Arrow</template>
  <TDropdownItem>Action</TDropdownItem>
</TDropdown>

With Badges

Use the badge and badgeColor fields in the items prop to display badges on the right side of menu items.

vue


<TDropdown :items="[
  { text: 'Notifications', badge: '12', badgeColor: 'primary' },
  { text: 'Messages', badge: '', badgeColor: 'green' },
]">
  <template #trigger-text>Badges</template>
</TDropdown>

Checkboxes & Radios

Use type="checkbox" or type="radio" on TDropdownItem for form-style selections. Bind state with v-model:checked.

Show Code

vue


<script setup lang="ts">
  import {ref} from 'vue'

  const checked1 = ref(true)
  const checked2 = ref(false)

  const radioValue = ref('option1')
</script>

<template>
  <!-- Checkbox (v-model:checked) -->
  <TDropdown>
    <template #trigger-text>Checkboxes</template>
    <TDropdownItem type="checkbox" v-model:checked="checked1">Option A</TDropdownItem>
    <TDropdownItem type="checkbox" v-model:checked="checked2">Option B</TDropdownItem>
  </TDropdown>

  <!-- Radio (controlled via checked + @update:checked) -->
  <TDropdown>
    <template #trigger-text>Radios</template>
    <TDropdownItem
        type="radio" name="demo"
        :checked="radioValue === 'option1'"
        @update:checked="radioValue = 'option1'"
    >Option A
    </TDropdownItem>
    <TDropdownItem
        type="radio" name="demo"
        :checked="radioValue === 'option2'"
        @update:checked="radioValue = 'option2'"
    >Option B
    </TDropdownItem>
  </TDropdown>
</template>

Right-Aligned

Set the end prop to align the menu to the right.

vue


<TDropdown end>
  <template #trigger-text>Right Aligned</template>
  <TDropdownItem>Action</TDropdownItem>
</TDropdown>

Custom Trigger

Use the trigger slot to fully customize the trigger element.

vue


<TDropdown>
  <template #trigger>
    <button class="btn btn-outline-primary dropdown-toggle">
      <IconBell class="icon"/>
      Notifications
    </button>
  </template>
  <TDropdownItem>New Notifications</TDropdownItem>
</TDropdown>

Trigger Mode

Use the trigger prop to set the trigger mode: click (default), hover, or contextMenu.

Show Code

vue

<!-- Click trigger (default) -->
<TDropdown trigger="click">
  <template #trigger-text>Click Me</template>
  <TDropdownItem>Action</TDropdownItem>
</TDropdown>

<!-- Hover trigger -->
<TDropdown trigger="hover">
  <template #trigger-text>Hover Me</template>
  <TDropdownItem>Action</TDropdownItem>
</TDropdown>

<!-- Right-click trigger -->
<TDropdown trigger="contextMenu">
  <template #trigger-text>Right-click Here</template>
  <TDropdownItem>Action</TDropdownItem>
</TDropdown>

Placement

Use the placement prop to control the dropdown menu's position. Supports 6 directions.

Note: The arrow prop is not compatible with placement. When arrow is set, the arrow always points upward toward the trigger and the menu cannot adapt its popup direction. Do not use arrow simultaneously with placement.

vue


<TDropdown placement="topLeft">...</TDropdown>
<TDropdown placement="top">...</TDropdown>
<TDropdown placement="topRight">...</TDropdown>
<TDropdown placement="bottomLeft">...</TDropdown>
<TDropdown placement="bottom">...</TDropdown>
<TDropdown placement="bottomRight">...</TDropdown>

Menu items support the children field for multi-level nesting.

Show Code

vue


<TDropdown :items="[
  { text: 'Email', icon: IconMail, children: [
    { text: 'Inbox', icon: IconMessage },
    { text: 'Sent', icon: IconMessage },
    { divider: true },
    { text: 'Trash' },
  ]},
  { text: 'Settings', icon: IconSettings },
]">
  <template #trigger-text>Multi-Level Menu</template>
</TDropdown>

Set :hideOnClick="false" to prevent the menu from closing when a menu item is clicked.

vue


<TDropdown :hideOnClick="false">
  <template #trigger-text>Stay Open</template>
  <TDropdownItem>Action</TDropdownItem>
</TDropdown>

Component Composition

Combine TDropdown with other components for richer interaction scenarios.

Use the trigger slot with TAvatar as the click target.

Show Code

vue


<TDropdown>
  <template #trigger>
    <TAvatar text="张三" color="primary-lt" style="cursor: pointer" />
  </template>
  <TDropdownItem icon="IconUser">Profile</TDropdownItem>
  <TDropdownItem icon="IconMessage">Messages</TDropdownItem>
  <TDropdownItem icon="IconPhoto">Gallery</TDropdownItem>
  <TDropdownItem divider />
  <TDropdownItem icon="IconSettings">Settings</TDropdownItem>
  <TDropdownItem icon="IconLogout">Logout</TDropdownItem>
</TDropdown>

Display a notification badge on the trigger, and use the badge prop on menu items.

Show Code

vue


<TDropdown>
  <template #trigger>
    <span class="position-relative d-inline-block" style="cursor: pointer">
      <IconBell size="24" />
      <TBadge color="red" pill notification blink>3</TBadge>
    </span>
  </template>
  <TDropdownItem icon="IconMessage" badge="2" badgeColor="primary">New Replies</TDropdownItem>
  <TDropdownItem icon="IconUser" badge="1" badgeColor="green">New Followers</TDropdownItem>
  <TDropdownItem icon="IconActivity">System Notice</TDropdownItem>
</TDropdown>

Use TButton as the trigger with different button styles.

Show Code

vue


<TDropdown>
  <template #trigger>
    <TButton color="primary" pill>Primary Button</TButton>
  </template>
  <TDropdownItem>Action</TDropdownItem>
  <TDropdownItem>Another Action</TDropdownItem>
</TDropdown>

<TDropdown>
  <template #trigger>
    <TButton color="red" outline iconOnly>
      <IconTrash size="18" />
    </TButton>
  </template>
  <TDropdownItem>Delete Selected</TDropdownItem>
  <TDropdownItem>Empty Trash</TDropdownItem>
</TDropdown>

<TDropdown>
  <template #trigger>
    <TButton color="green" ghost size="sm"><IconDots size="18" /> More</TButton>
  </template>
  <TDropdownItem>Export Data</TDropdownItem>
  <TDropdownItem>Print Report</TDropdownItem>
</TDropdown>

Set trigger="contextMenu" so the menu appears on right-click — ideal for cards, list items, etc.

Show Code

vue


<TDropdown trigger="contextMenu">
  <template #trigger>
    <div class="card" style="cursor: context-menu">
      <div class="card-body text-center text-secondary py-4">
        <div class="mb-2"><IconPhoto size="32" /></div>
        <div class="fw-bold">Photo Card</div>
        <div class="text-muted small">Right-click this area to test</div>
      </div>
    </div>
  </template>
  <TDropdownItem icon="IconEdit">Edit</TDropdownItem>
  <TDropdownItem icon="IconPhoto">View Full Size</TDropdownItem>
  <TDropdownItem divider />
  <TDropdownItem icon="IconTrash" disabled>Delete</TDropdownItem>
</TDropdown>

API

Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	v-model binding, controls open/close
`items`	`DropdownItem[]`	—	Menu items list (overrides default slot)
`size`	`'sm' \| 'md' \| 'lg'`	—	Menu size
`end`	`boolean`	`false`	Right-align the menu
`arrow`	`boolean`	`false`	Show an arrow on the menu
`dark`	`boolean`	`false`	Dark theme
`disabled`	`boolean`	`false`	Disable opening
`menuClass`	`string`	—	Additional CSS class for the menu
`trigger`	`'click' \| 'hover' \| 'contextMenu'`	`'click'`	Trigger mode
`placement`	`'bottomLeft' \| 'bottom' \| 'bottomRight' \| 'topLeft' \| 'top' \| 'topRight'`	—	Popup position
`hideOnClick`	`boolean`	`true`	Whether to close on menu item click
`destroyOnClose`	`boolean`	`false`	Destroy DOM on close

Slots

Slot	Description
`trigger`	Custom trigger element (full customization)
`trigger-text`	Trigger button text (when using the default trigger button)
`default`	Menu content (when `items` prop is not provided)

Emits

Event	Payload	Description
`update:modelValue`	`(value: boolean)`	v-model update event
`toggle`	`(open: boolean)`	Fires on open/close
`openChange`	`(open: boolean)`	Fires when visibility changes

DropdownItem Type

Property	Type	Default	Description
`text`	`string`	—	Display text
`href`	`string`	—	Link URL (renders `<span>` if omitted)
`icon`	`Component / Icon`	—	Icon component
`active`	`boolean`	`false`	Active/highlight state
`disabled`	`boolean`	`false`	Disabled state
`divider`	`boolean`	`false`	Render as a divider
`header`	`boolean`	`false`	Render as a group header
`badge`	`string \| number`	—	Badge content
`badgeColor`	`string`	—	Badge color (e.g. `primary`, `green`)
`checked`	`boolean`	—	Checkbox/radio checked state
`toggle`	`boolean`	`false`	Show arrow indicator (for sub-menus)
`avatar`	`{ src?: string; name?: string }`	—	Avatar configuration
`children`	`DropdownItem[]`	—	Sub-menu items (supports multi-level nesting)

TDropdownItem Props

Prop	Type	Default	Description
`text`	`string`	—	Display text
`href`	`string`	—	Link URL (renders `<span>` if omitted, `<a>` if provided)
`icon`	`Component / Icon`	—	Icon component (imported from `@tabler/icons-vue`)
`type`	`'item' \| 'checkbox' \| 'radio'`	`'item'`	Element type
`name`	`string`	—	Radio group name
`checked`	`boolean`	—	Checkbox/radio checked state (supports `v-model:checked`)
`active`	`boolean`	`false`	Active/highlight state
`disabled`	`boolean`	`false`	Disabled state
`divider`	`boolean`	`false`	Render as a divider
`header`	`boolean`	`false`	Render as a group header
`badge`	`string \| number`	—	Badge content
`badgeColor`	`string`	—	Badge color (e.g. `primary`, `green`)
`avatar`	`{ src?: string; name?: string }`	—	Avatar configuration
`children`	`DropdownItem[]`	—	Sub-menu items

TDropdownItem Slots

Slot	Description
`default`	Menu item text content

TDropdownItem Emits

Event	Payload	Description
`update:checked`	`(value: boolean)`	`v-model:checked` binding event
`click`	`(e: MouseEvent)`	Fires when the menu item is clicked

Basic Usage

Dividers & Group Headers

States

Active State

Disabled State

With Icons

With Arrow

With Badges

Checkboxes & Radios

Right-Aligned

Custom Trigger

Trigger Mode

Placement

Multi-Level Menu

Keep Menu Open

Component Composition

Card Right-Click Menu

API

Props

Slots

Emits

DropdownItem Type

TDropdownItem Props

TDropdownItem Slots

TDropdownItem Emits

Dropdown ​

Basic Usage ​

Dividers & Group Headers ​

States ​

Active State ​

Disabled State ​

With Icons ​

With Arrow ​

With Badges ​

Checkboxes & Radios ​

Right-Aligned ​

Custom Trigger ​

Trigger Mode ​

Placement ​

Multi-Level Menu ​

Keep Menu Open ​

Component Composition ​

Avatar + Dropdown ​

Badge + Dropdown ​

Button + Dropdown ​

Card Right-Click Menu ​

API ​

Props ​

Slots ​

Emits ​

DropdownItem Type ​

TDropdownItem Props ​

TDropdownItem Slots ​

TDropdownItem Emits ​

Basic Usage

Dividers & Group Headers

States

Active State

Disabled State

With Icons

With Arrow

With Badges

Checkboxes & Radios

Right-Aligned

Custom Trigger

Trigger Mode

Placement

Multi-Level Menu

Keep Menu Open

Component Composition

Avatar + Dropdown

Badge + Dropdown

Button + Dropdown

Card Right-Click Menu

API

Props

Slots

Emits

DropdownItem Type

TDropdownItem Props

TDropdownItem Slots

TDropdownItem Emits