DropdownMenu

TxDropdownMenu renders a compact action menu from a trigger slot. It is controlled with v-model and uses TxDropdownItem for selectable menu rows.

Basic Usage

DropdownMenu

Demo will load when visible.

<template>
  <TxDropdownMenu>
    <template #trigger>
      <TxButton>Menu</TxButton>
    </template>

    <TxDropdownItem>Open</TxDropdownItem>
    <TxDropdownItem danger>Delete</TxDropdownItem>
  </TxDropdownMenu>
</template>

DropdownMenu (nav)

Demo will load when visible.

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

const open = ref(false)
</script>

<template>
  <div style="display: flex; align-items: center; gap: 10px;">
    <TxDropdownMenu v-model="open" :min-width="240" placement="bottom-start" :panel-padding="8">
      <template #trigger>
        <div
          style="display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--tx-border-color); border-radius: 12px; user-select: none; cursor: pointer;"
        >
          <div style="font-weight: 600;">
            Repository
          </div>
          <div style="color: var(--tx-text-color-secondary); font-weight: 600;">
            main
          </div>
          <TxIcon name="chevron-down" style="opacity: 0.65;" />
        </div>
      </template>

      <TxDropdownItem arrow>
        GitHub
        <template #right>
          <span style="opacity: 0.72; display: inline-flex; align-items: center;">
            <i class="i-ri-external-link-line" style="font-size: 16px;" />
          </span>
        </template>
      </TxDropdownItem>
      <TxDropdownItem arrow>
        NPM
        <template #right>
          <span style="opacity: 0.72; display: inline-flex; align-items: center;">
            <i class="i-ri-external-link-line" style="font-size: 16px;" />
          </span>
        </template>
      </TxDropdownItem>
    </TxDropdownMenu>
  </div>
</template>

API

TxDropdownMenu Props

Prop	Type	Default	Description
`modelValue`	`boolean`	`false`	Controls whether the dropdown is open.
`placement`	`DropdownPlacement`	`'bottom-start'`	Positions the panel relative to the trigger.
`offset`	`number`	`6`	Distance in pixels between the trigger and panel.
`closeOnSelect`	`boolean`	`true`	Closes the menu after an enabled item emits `select`.
`duration`	`number`	`180`	Popover transition duration in milliseconds.
`minWidth`	`number`	`220`	Minimum panel width in pixels.
`maxHeight`	`number`	`420`	Maximum scrollable panel height in pixels.
`unlimitedHeight`	`boolean`	`false`	Disables the panel max-height constraint.
`referenceClass`	`BaseAnchorClassValue`	-	Extra class value forwarded to the trigger anchor.
`panelCard`	`BaseAnchorPanelCardProps`	-	Low-level card props forwarded to the popover panel.
`panelVariant`	`'solid' \| 'dashed' \| 'plain'`	`'solid'`	Visual border variant forwarded to the popover panel.
`panelBackground`	`'pure' \| 'mask' \| 'blur' \| 'glass' \| 'refraction'`	`'refraction'`	Background treatment forwarded to the popover panel.
`panelShadow`	`'none' \| 'soft' \| 'medium'`	`'soft'`	Shadow strength forwarded to the popover panel.
`panelRadius`	`number`	`18`	Panel corner radius in pixels.
`panelPadding`	`number`	`8`	Panel padding in pixels.

TxDropdownItem Props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Prevents selection and renders the item as disabled.
`danger`	`boolean`	`false`	Applies danger text styling for destructive actions.
`arrow`	`boolean`	`false`	Shows a trailing chevron when no `right` slot is provided.

TxDropdownMenu Events

Event	Params	Description
`update:modelValue`	`(value: boolean)`	Emitted when the menu requests an open-state change.
`open`	-	Emitted when the menu requests opening.
`close`	-	Emitted when the menu requests closing.

TxDropdownItem Events

Event	Params	Description
`select`	-	Emitted when an enabled item is clicked.