Menu

A list of options that appears when a user interacts with a trigger element.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { Menu } from '@destyler-ui/vue'

const items = ref(['react', 'solid', 'vue', 'svelte'])
const checked = ref(false)
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>
      Open menu
      <Menu.Indicator />
    </Menu.Trigger>
    <Menu.ContextTrigger>Open Context Menu</Menu.ContextTrigger>
    <Menu.Positioner data-testid="positioner">
      <Menu.Content>
        <Menu.Arrow>
          <Menu.ArrowTip />
        </Menu.Arrow>
        <Menu.ItemGroup>
          <Menu.ItemGroupLabel>Destyler UI</Menu.ItemGroupLabel>
          <Menu.Item value="dialog" disabled>Dialog</Menu.Item>
        </Menu.ItemGroup>
        <Menu.Separator />
        <Menu.CheckboxItem v-model:checked="checked" value="my-checkbox">
          <Menu.ItemIndicator>✅</Menu.ItemIndicator>
          <Menu.ItemText>Check me</Menu.ItemText>
        </Menu.CheckboxItem>
        <Menu.Separator />
        <Menu.RadioItemGroup>
          <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
          <Menu.RadioItem v-for="item in items" :key="item" :value="item">
            <Menu.ItemIndicator>✅</Menu.ItemIndicator>
            <Menu.ItemText>{{ item }}</Menu.ItemText>
          </Menu.RadioItem>
        </Menu.RadioItemGroup>
        <Menu.Separator />
        <Menu.Root>
          <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
          <Menu.Positioner>
            <Menu.Content>
              <Menu.Item value="unocss">UnoCSS</Menu.Item>
              <Menu.Item value="tailwind">Tailwind</Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Menu.Root>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { useState } from 'react'
import { Menu } from '@destyler-ui/react'

const items = ['react', 'solid', 'vue', 'svelte']

export function Basic() {
  const [checked, setChecked] = useState(false)

  return (
    <Menu.Root>
      <Menu.Trigger>
        Open menu
        <Menu.Indicator />
      </Menu.Trigger>
      <Menu.ContextTrigger>Open Context Menu</Menu.ContextTrigger>
      <Menu.Positioner data-testid="positioner">
        <Menu.Content>
          <Menu.Arrow>
            <Menu.ArrowTip />
          </Menu.Arrow>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>Destyler UI</Menu.ItemGroupLabel>
            <Menu.Item value="dialog" disabled>Dialog</Menu.Item>
          </Menu.ItemGroup>
          <Menu.Separator />
          <Menu.CheckboxItem
            checked={checked}
            onCheckedChange={e => setChecked(e as boolean)}
            value="my-checkbox"
          >
            <Menu.ItemIndicator>✅</Menu.ItemIndicator>
            <Menu.ItemText>Check me</Menu.ItemText>
          </Menu.CheckboxItem>
          <Menu.Separator />
          <Menu.RadioItemGroup>
            <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
            {items.map(item => (
              <Menu.RadioItem key={item} value={item}>
                <Menu.ItemIndicator>✅</Menu.ItemIndicator>
                <Menu.ItemText>{item}</Menu.ItemText>
              </Menu.RadioItem>
            ))}
          </Menu.RadioItemGroup>
          <Menu.Separator />
          <Menu.Root>
            <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
            <Menu.Positioner>
              <Menu.Content>
                <Menu.Item value="unocss">UnoCSS</Menu.Item>
                <Menu.Item value="tailwind">Tailwind</Menu.Item>
              </Menu.Content>
            </Menu.Positioner>
          </Menu.Root>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'

export function Basic() {
  return (
    <Menu.Root>
      <Menu.Trigger>
        Open menu <Menu.Indicator>➡️</Menu.Indicator>
      </Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">
  import { Menu } from '@destyler-ui/svelte'
  const items = ['react', 'solid', 'vue', 'svelte']
  let checked = $state(false)
</script>

<Menu.Root>
  <Menu.Trigger>Open menu <Menu.Indicator /></Menu.Trigger>
  <Menu.ContextTrigger>Open Context Menu</Menu.ContextTrigger>
  <Menu.Positioner data-testid="positioner">
    <Menu.Content>
      <Menu.Arrow><Menu.ArrowTip /></Menu.Arrow>
      <Menu.ItemGroup><Menu.ItemGroupLabel>Destyler UI</Menu.ItemGroupLabel><Menu.Item value="dialog" disabled>Dialog</Menu.Item></Menu.ItemGroup>
      <Menu.Separator />
      <Menu.CheckboxItem bind:checked value="my-checkbox"><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>Check me</Menu.ItemText></Menu.CheckboxItem>
      <Menu.Separator />
      <Menu.RadioItemGroup>
        <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
        {#each items as item}<Menu.RadioItem value={item}><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>{item}</Menu.ItemText></Menu.RadioItem>{/each}
      </Menu.RadioItemGroup>
      <Menu.Separator />
      <Menu.Root>
        <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
        <Menu.Positioner><Menu.Content><Menu.Item value="unocss">UnoCSS</Menu.Item><Menu.Item value="tailwind">Tailwind</Menu.Item></Menu.Content></Menu.Positioner>
      </Menu.Root>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>

Anatomy

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
</script>

<template>
  <Menu.Root>
    <Menu.Trigger />
    <Menu.Positioner>
      <Menu.Content>
        <Menu.ItemGroup>
          <Menu.ItemGroupLabel />
          <Menu.Item>
            <Menu.ItemText />
            <Menu.ItemIndicator />
          </Menu.Item>
        </Menu.ItemGroup>
        <Menu.Separator />
        <Menu.CheckboxItem>
          <Menu.ItemIndicator />
        </Menu.CheckboxItem>
        <Menu.RadioItemGroup>
          <Menu.RadioItem>
            <Menu.ItemIndicator />
          </Menu.RadioItem>
        </Menu.RadioItemGroup>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { Menu } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Menu.Root>
      <Menu.Trigger />
      <Menu.Positioner>
        <Menu.Content>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel />
            <Menu.Item>
              <Menu.ItemText />
              <Menu.ItemIndicator />
            </Menu.Item>
          </Menu.ItemGroup>
          <Menu.Separator />
          <Menu.CheckboxItem>
            <Menu.ItemIndicator />
          </Menu.CheckboxItem>
          <Menu.RadioItemGroup>
            <Menu.RadioItem>
              <Menu.ItemIndicator />
            </Menu.RadioItem>
          </Menu.RadioItemGroup>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Menu.Root>
      <Menu.Trigger />
      <Menu.Positioner>
        <Menu.Content>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel />
            <Menu.Item value="profile">
              <Menu.ItemText />
              <Menu.ItemIndicator />
            </Menu.Item>
          </Menu.ItemGroup>
          <Menu.Separator />
          <Menu.CheckboxItem value="notifications" checked>
            <Menu.ItemIndicator />
          </Menu.CheckboxItem>
          <Menu.RadioItemGroup>
            <Menu.RadioItem value="compact">
              <Menu.ItemIndicator />
            </Menu.RadioItem>
          </Menu.RadioItemGroup>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">
  import { Menu } from '@destyler-ui/svelte'
  const items = ['react', 'solid', 'vue', 'svelte']
  let checked = $state(false)
</script>

<Menu.Root>
  <Menu.Trigger>Open menu <Menu.Indicator /></Menu.Trigger>
  <Menu.ContextTrigger>Open Context Menu</Menu.ContextTrigger>
  <Menu.Positioner data-testid="positioner">
    <Menu.Content>
      <Menu.Arrow><Menu.ArrowTip /></Menu.Arrow>
      <Menu.ItemGroup><Menu.ItemGroupLabel>Destyler UI</Menu.ItemGroupLabel><Menu.Item value="dialog" disabled>Dialog</Menu.Item></Menu.ItemGroup>
      <Menu.Separator />
      <Menu.CheckboxItem bind:checked value="my-checkbox"><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>Check me</Menu.ItemText></Menu.CheckboxItem>
      <Menu.Separator />
      <Menu.RadioItemGroup>
        <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
        {#each items as item}<Menu.RadioItem value={item}><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>{item}</Menu.ItemText></Menu.RadioItem>{/each}
      </Menu.RadioItemGroup>
      <Menu.Separator />
      <Menu.Root>
        <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
        <Menu.Positioner><Menu.Content><Menu.Item value="unocss">UnoCSS</Menu.Item><Menu.Item value="tailwind">Tailwind</Menu.Item></Menu.Content></Menu.Positioner>
      </Menu.Root>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { Menu } from '@destyler-ui/vue'

const items = ref(['react', 'solid', 'vue', 'svelte'])
const checked = ref(false)
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>
      Open menu
      <Menu.Indicator />
    </Menu.Trigger>
    <Menu.ContextTrigger>Open Context Menu</Menu.ContextTrigger>
    <Menu.Positioner data-testid="positioner">
      <Menu.Content>
        <Menu.Arrow>
          <Menu.ArrowTip />
        </Menu.Arrow>
        <Menu.ItemGroup>
          <Menu.ItemGroupLabel>Destyler UI</Menu.ItemGroupLabel>
          <Menu.Item value="dialog" disabled>Dialog</Menu.Item>
        </Menu.ItemGroup>
        <Menu.Separator />
        <Menu.CheckboxItem v-model:checked="checked" value="my-checkbox">
          <Menu.ItemIndicator>✅</Menu.ItemIndicator>
          <Menu.ItemText>Check me</Menu.ItemText>
        </Menu.CheckboxItem>
        <Menu.Separator />
        <Menu.RadioItemGroup>
          <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
          <Menu.RadioItem v-for="item in items" :key="item" :value="item">
            <Menu.ItemIndicator>✅</Menu.ItemIndicator>
            <Menu.ItemText>{{ item }}</Menu.ItemText>
          </Menu.RadioItem>
        </Menu.RadioItemGroup>
        <Menu.Separator />
        <Menu.Root>
          <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
          <Menu.Positioner>
            <Menu.Content>
              <Menu.Item value="unocss">UnoCSS</Menu.Item>
              <Menu.Item value="tailwind">Tailwind</Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Menu.Root>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { useState } from 'react'
import { Menu } from '@destyler-ui/react'

const items = ['react', 'solid', 'vue', 'svelte']

export function Basic() {
  const [checked, setChecked] = useState(false)

  return (
    <Menu.Root>
      <Menu.Trigger>
        Open menu
        <Menu.Indicator />
      </Menu.Trigger>
      <Menu.ContextTrigger>Open Context Menu</Menu.ContextTrigger>
      <Menu.Positioner data-testid="positioner">
        <Menu.Content>
          <Menu.Arrow>
            <Menu.ArrowTip />
          </Menu.Arrow>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>Destyler UI</Menu.ItemGroupLabel>
            <Menu.Item value="dialog" disabled>Dialog</Menu.Item>
          </Menu.ItemGroup>
          <Menu.Separator />
          <Menu.CheckboxItem
            checked={checked}
            onCheckedChange={e => setChecked(e as boolean)}
            value="my-checkbox"
          >
            <Menu.ItemIndicator>✅</Menu.ItemIndicator>
            <Menu.ItemText>Check me</Menu.ItemText>
          </Menu.CheckboxItem>
          <Menu.Separator />
          <Menu.RadioItemGroup>
            <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
            {items.map(item => (
              <Menu.RadioItem key={item} value={item}>
                <Menu.ItemIndicator>✅</Menu.ItemIndicator>
                <Menu.ItemText>{item}</Menu.ItemText>
              </Menu.RadioItem>
            ))}
          </Menu.RadioItemGroup>
          <Menu.Separator />
          <Menu.Root>
            <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
            <Menu.Positioner>
              <Menu.Content>
                <Menu.Item value="unocss">UnoCSS</Menu.Item>
                <Menu.Item value="tailwind">Tailwind</Menu.Item>
              </Menu.Content>
            </Menu.Positioner>
          </Menu.Root>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'

export function Basic() {
  return (
    <Menu.Root>
      <Menu.Trigger>
        Open menu <Menu.Indicator>➡️</Menu.Indicator>
      </Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">
  import { Menu } from '@destyler-ui/svelte'
  const items = ['react', 'solid', 'vue', 'svelte']
  let checked = $state(false)
</script>

<Menu.Root>
  <Menu.Trigger>Open menu <Menu.Indicator /></Menu.Trigger>
  <Menu.ContextTrigger>Open Context Menu</Menu.ContextTrigger>
  <Menu.Positioner data-testid="positioner">
    <Menu.Content>
      <Menu.Arrow><Menu.ArrowTip /></Menu.Arrow>
      <Menu.ItemGroup><Menu.ItemGroupLabel>Destyler UI</Menu.ItemGroupLabel><Menu.Item value="dialog" disabled>Dialog</Menu.Item></Menu.ItemGroup>
      <Menu.Separator />
      <Menu.CheckboxItem bind:checked value="my-checkbox"><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>Check me</Menu.ItemText></Menu.CheckboxItem>
      <Menu.Separator />
      <Menu.RadioItemGroup>
        <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
        {#each items as item}<Menu.RadioItem value={item}><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>{item}</Menu.ItemText></Menu.RadioItem>{/each}
      </Menu.RadioItemGroup>
      <Menu.Separator />
      <Menu.Root>
        <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
        <Menu.Positioner><Menu.Content><Menu.Item value="unocss">UnoCSS</Menu.Item><Menu.Item value="tailwind">Tailwind</Menu.Item></Menu.Content></Menu.Positioner>
      </Menu.Root>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>

Context

Use a context menu triggered by right-click.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
</script>

<template>
  <Menu.Root>
    <Menu.ContextTrigger>Right click me</Menu.ContextTrigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="react">React</Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Item value="vue">Vue</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { Menu } from '@destyler-ui/react'

export function Context() {
  return (
    <Menu.Root>
      <Menu.ContextTrigger>Right click me</Menu.ContextTrigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'

export function Context() {
  return (
    <Menu.Root>
      <Menu.ContextTrigger>Right click me</Menu.ContextTrigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">import { Menu } from '@destyler-ui/svelte'</script>
<Menu.Root><Menu.ContextTrigger>Right click me</Menu.ContextTrigger><Menu.Positioner><Menu.Content>
  <Menu.Item value="react">React</Menu.Item><Menu.Item value="solid">Solid</Menu.Item><Menu.Item value="vue">Vue</Menu.Item>
</Menu.Content></Menu.Positioner></Menu.Root>

Controlled

Control the open state of the menu programmatically.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
import { ref } from 'vue'

const isOpen = ref(false)
</script>

<template>
  <button @click="isOpen = !isOpen">Trigger from the outside</button>
  <Menu.Root :open="isOpen">
    <Menu.Trigger>Open menu</Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="react">React</Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Item value="vue">Vue</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { useState } from 'react'
import { Menu } from '@destyler-ui/react'

export function Controlled() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(!isOpen)}>Trigger from the outside</button>
      <Menu.Root open={isOpen}>
        <Menu.Trigger>Open menu</Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>
    </>
  )
}

import { Menu } from '@destyler-ui/solid/menu'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [isOpen, setIsOpen] = createSignal(false)

  return (
    <>
      <button type="button" onClick={() => setIsOpen(!isOpen())}>
        Trigger from the outside
      </button>
      <Menu.Root open={isOpen()} onSelect={id => console.warn(id)}>
        <Menu.Trigger>
          Open menu <Menu.Indicator>➡️</Menu.Indicator>
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>
    </>
  )
}

<script lang="ts">
  import { Menu } from '@destyler-ui/svelte'
  let open = $state(false)
</script>
<button type="button" onclick={() => open = !open}>Trigger from the outside</button>
<Menu.Root bind:open><Menu.Trigger>Open menu</Menu.Trigger><Menu.Positioner><Menu.Content>
  <Menu.Item value="react">React</Menu.Item><Menu.Item value="solid">Solid</Menu.Item><Menu.Item value="vue">Vue</Menu.Item>
</Menu.Content></Menu.Positioner></Menu.Root>

Nested

Create nested submenus.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>Open menu</Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Root>
          <Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
          <Menu.Positioner>
            <Menu.Content>
              <Menu.Item value="react">React</Menu.Item>
              <Menu.Item value="solid">Solid</Menu.Item>
              <Menu.Item value="vue">Vue</Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Menu.Root>
        <Menu.Root>
          <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
          <Menu.Positioner>
            <Menu.Content>
              <Menu.Item value="unocss">UnoCSS</Menu.Item>
              <Menu.Item value="tailwind">Tailwind</Menu.Item>
            </Menu.Content>
          </Menu.Positioner>
        </Menu.Root>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { Menu } from '@destyler-ui/react'

export function Nested() {
  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Root>
            <Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
            <Menu.Positioner>
              <Menu.Content>
                <Menu.Item value="react">React</Menu.Item>
                <Menu.Item value="solid">Solid</Menu.Item>
                <Menu.Item value="vue">Vue</Menu.Item>
              </Menu.Content>
            </Menu.Positioner>
          </Menu.Root>
          <Menu.Root>
            <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
            <Menu.Positioner>
              <Menu.Content>
                <Menu.Item value="unocss">UnoCSS</Menu.Item>
                <Menu.Item value="tailwind">Tailwind</Menu.Item>
              </Menu.Content>
            </Menu.Positioner>
          </Menu.Root>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'
import { Portal } from 'solid-js/web'

export function Nested() {
  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Root>
            <Menu.TriggerItem>JS Frameworks</Menu.TriggerItem>
            <Portal>
              <Menu.Positioner>
                <Menu.Content>
                  <Menu.Item value="react">React</Menu.Item>
                  <Menu.Item value="solid">Solid</Menu.Item>
                  <Menu.Item value="vue">Vue</Menu.Item>
                </Menu.Content>
              </Menu.Positioner>
            </Portal>
          </Menu.Root>
          <Menu.Root>
            <Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem>
            <Portal>
              <Menu.Positioner>
                <Menu.Content>
                  <Menu.Item value="panda">Panda</Menu.Item>
                  <Menu.Item value="tailwind">Tailwind</Menu.Item>
                </Menu.Content>
              </Menu.Positioner>
            </Portal>
          </Menu.Root>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">import { Menu } from '@destyler-ui/svelte'</script>
<Menu.Root><Menu.Trigger>Open menu</Menu.Trigger><Menu.Positioner><Menu.Content>
  <Menu.Root><Menu.TriggerItem>JS Frameworks</Menu.TriggerItem><Menu.Positioner><Menu.Content><Menu.Item value="react">React</Menu.Item><Menu.Item value="solid">Solid</Menu.Item><Menu.Item value="vue">Vue</Menu.Item></Menu.Content></Menu.Positioner></Menu.Root>
  <Menu.Root><Menu.TriggerItem>CSS Frameworks</Menu.TriggerItem><Menu.Positioner><Menu.Content><Menu.Item value="unocss">UnoCSS</Menu.Item><Menu.Item value="tailwind">Tailwind</Menu.Item></Menu.Content></Menu.Positioner></Menu.Root>
</Menu.Content></Menu.Positioner></Menu.Root>

Group

Group menu items together.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>Open menu</Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.ItemGroup>
          <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup>
          <Menu.ItemGroupLabel>CSS Frameworks</Menu.ItemGroupLabel>
          <Menu.Item value="unocss">UnoCSS</Menu.Item>
          <Menu.Item value="tailwind">Tailwind</Menu.Item>
        </Menu.ItemGroup>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { Menu } from '@destyler-ui/react'

export function Group() {
  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>CSS Frameworks</Menu.ItemGroupLabel>
            <Menu.Item value="unocss">UnoCSS</Menu.Item>
            <Menu.Item value="tailwind">Tailwind</Menu.Item>
          </Menu.ItemGroup>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'

export function Group() {
  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.ItemGroup>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>CSS Frameworks</Menu.ItemGroupLabel>
            <Menu.Item value="panda">Panda</Menu.Item>
            <Menu.Item value="tailwind">Tailwind</Menu.Item>
          </Menu.ItemGroup>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">import { Menu } from '@destyler-ui/svelte'</script>
<Menu.Root><Menu.Trigger>Open menu</Menu.Trigger><Menu.Positioner><Menu.Content>
  <Menu.ItemGroup><Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel><Menu.Item value="react">React</Menu.Item><Menu.Item value="solid">Solid</Menu.Item><Menu.Item value="vue">Vue</Menu.Item></Menu.ItemGroup>
  <Menu.ItemGroup><Menu.ItemGroupLabel>CSS Frameworks</Menu.ItemGroupLabel><Menu.Item value="unocss">UnoCSS</Menu.Item><Menu.Item value="tailwind">Tailwind</Menu.Item></Menu.ItemGroup>
</Menu.Content></Menu.Positioner></Menu.Root>

Checkbox

Use checkbox items in the menu.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
import { ref } from 'vue'

const checked = ref(true)
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>Open menu</Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.CheckboxItem v-model:checked="checked" value="my-checkbox">
          <Menu.ItemIndicator>✅</Menu.ItemIndicator>
          <Menu.ItemText>Check me</Menu.ItemText>
        </Menu.CheckboxItem>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { useState } from 'react'
import { Menu } from '@destyler-ui/react'

export function Checkbox() {
  const [checked, setChecked] = useState(true)

  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.CheckboxItem
            checked={checked}
            onCheckedChange={e => setChecked(e as boolean)}
            value="my-checkbox"
          >
            <Menu.ItemIndicator>✅</Menu.ItemIndicator>
            <Menu.ItemText>Check me</Menu.ItemText>
          </Menu.CheckboxItem>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'
import { createSignal } from 'solid-js'

export function Checkbox() {
  const [checked, setChecked] = createSignal(true)

  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.CheckboxItem checked={checked()} onCheckedChange={setChecked} value="checked">
            <Menu.ItemIndicator>✅</Menu.ItemIndicator>
            <Menu.ItemText>Check me</Menu.ItemText>
          </Menu.CheckboxItem>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">
  import { Menu } from '@destyler-ui/svelte'
  let checked = $state(true)
</script>
<Menu.Root><Menu.Trigger>Open menu</Menu.Trigger><Menu.Positioner><Menu.Content>
  <Menu.CheckboxItem bind:checked value="my-checkbox"><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>Check me</Menu.ItemText></Menu.CheckboxItem>
</Menu.Content></Menu.Positioner></Menu.Root>

Radio Group

Use radio items in the menu for single selection.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
import { ref } from 'vue'

const value = ref('React')
const items = ref(['React', 'Solid', 'Vue'])
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>Open menu</Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.RadioItemGroup v-model="value">
          <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
          <Menu.RadioItem v-for="item in items" :key="item" :value="item">
            <Menu.ItemIndicator>✅</Menu.ItemIndicator>
            <Menu.ItemText>{{ item }}</Menu.ItemText>
          </Menu.RadioItem>
        </Menu.RadioItemGroup>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { useState } from 'react'
import { Menu } from '@destyler-ui/react'

const items = ['React', 'Solid', 'Vue']

export function RadioGroup() {
  const [value, setValue] = useState('React')

  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.RadioItemGroup value={value} onValueChange={({ value }) => setValue(value)}>
            <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
            {items.map(item => (
              <Menu.RadioItem key={item} value={item}>
                <Menu.ItemIndicator>✅</Menu.ItemIndicator>
                <Menu.ItemText>{item}</Menu.ItemText>
              </Menu.RadioItem>
            ))}
          </Menu.RadioItemGroup>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { createSignal, For } from 'solid-js'
import { Menu } from '@destyler-ui/solid'

const items = ['React', 'Solid', 'Vue']

export function RadioGroup() {
  const [value, setValue] = createSignal('React')

  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.RadioItemGroup
            value={value()}
            onValueChange={({ value }) => setValue(value)}
          >
            <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
            <For each={items}>
              {item => (
                <Menu.RadioItem value={item}>
                  <Menu.ItemIndicator>✅</Menu.ItemIndicator>
                  <Menu.ItemText>{item}</Menu.ItemText>
                </Menu.RadioItem>
              )}
            </For>
          </Menu.RadioItemGroup>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">
  import { Menu } from '@destyler-ui/svelte'
  const items = ['React', 'Solid', 'Vue']
  let value = $state('React')
</script>
<Menu.Root><Menu.Trigger>Open menu</Menu.Trigger><Menu.Positioner><Menu.Content><Menu.RadioItemGroup bind:value>
  <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
  {#each items as item}<Menu.RadioItem value={item}><Menu.ItemIndicator>✅</Menu.ItemIndicator><Menu.ItemText>{item}</Menu.ItemText></Menu.RadioItem>{/each}
</Menu.RadioItemGroup></Menu.Content></Menu.Positioner></Menu.Root>

Separator

Add visual separators between menu items.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
</script>

<template>
  <Menu.Root>
    <Menu.Trigger>Open menu</Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="react">React</Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Separator />
        <Menu.Item value="vue">Vue</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { Menu } from '@destyler-ui/react'

export function Separator() {
  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Separator />
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'

export function Separator() {
  return (
    <Menu.Root>
      <Menu.Trigger>Open menu</Menu.Trigger>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Separator />
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">import { Menu } from '@destyler-ui/svelte'</script>
<Menu.Root><Menu.Trigger>Open menu</Menu.Trigger><Menu.Positioner><Menu.Content>
  <Menu.Item value="react">React</Menu.Item><Menu.Item value="solid">Solid</Menu.Item><Menu.Separator /><Menu.Item value="vue">Vue</Menu.Item>
</Menu.Content></Menu.Positioner></Menu.Root>

Render Prop

Use render prop for custom menu item rendering.

Show Code

<script setup lang="ts">
import { Menu } from '@destyler-ui/vue'
</script>

<template>
  <Menu.Root>
    <Menu.Context v-slot="menu">
      <Menu.Trigger>Menu is {{ menu.open ? 'open' : 'closed' }}</Menu.Trigger>
    </Menu.Context>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="react">
          <Menu.ItemContext v-slot="item">
            React is {{ item.highlighted ? 'highlighted' : 'not highlighted' }}
          </Menu.ItemContext>
        </Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Item value="vue">Vue</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.Root>
</template>

import { Menu } from '@destyler-ui/react'

export function RenderProp() {
  return (
    <Menu.Root>
      <Menu.Context>
        {menu => (
          <Menu.Trigger>Menu is {menu.open ? 'open' : 'closed'}</Menu.Trigger>
        )}
      </Menu.Context>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">
            <Menu.ItemContext>
              {item => `React is ${item.highlighted ? 'highlighted' : 'not highlighted'}`}
            </Menu.ItemContext>
          </Menu.Item>
          <Menu.Item value="solid">Solid</Menu.Item>
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

import { Menu } from '@destyler-ui/solid/menu'

export function RenderProp() {
  return (
    <Menu.Root>
      <Menu.Context>
        {context => <Menu.Trigger>Menu is {context().open ? 'open' : 'closed'}</Menu.Trigger>}
      </Menu.Context>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.Item value="react">React</Menu.Item>
          <Menu.Item value="solid">
            <Menu.ItemContext>
              {context => <>Solid is {context().highlighted ? 'highlighted' : 'not highlighted'}</>}
            </Menu.ItemContext>
          </Menu.Item>
          <Menu.Item value="vue">Vue</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Menu.Root>
  )
}

<script lang="ts">import { Menu } from '@destyler-ui/svelte'</script>
<Menu.Root>
  <Menu.Context>{#snippet render(menu)}<Menu.Trigger>Menu is {menu().open ? 'open' : 'closed'}</Menu.Trigger>{/snippet}</Menu.Context>
  <Menu.Positioner><Menu.Content>
    <Menu.Item value="react"><Menu.ItemContext>{#snippet render(item)}React is {item().highlighted ? 'highlighted' : 'not highlighted'}{/snippet}</Menu.ItemContext></Menu.Item>
    <Menu.Item value="solid">Solid</Menu.Item><Menu.Item value="vue">Vue</Menu.Item>
  </Menu.Content></Menu.Positioner>
</Menu.Root>

Root Provider

Show Code

<script setup lang="ts">
import { Menu, useMenu } from '@destyler-ui/vue'

const menu = useMenu()
</script>

<template>
  <button @click="menu.api.value.setHighlightedValue('solid')">Highlight Solid</button>

  <Menu.RootProvider :value="menu">
    <Menu.Trigger>
      Open menu
      <Menu.Indicator />
    </Menu.Trigger>
    <Menu.Positioner>
      <Menu.Content>
        <Menu.Item value="react">React</Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Item value="vue">Vue</Menu.Item>
      </Menu.Content>
    </Menu.Positioner>
  </Menu.RootProvider>
</template>

import { Menu, useMenu } from '@destyler-ui/react'

export function RootProvider() {
  const menu = useMenu()

  return (
    <>
      <button onClick={() => menu.api.setHighlightedValue('solid')}>Highlight Solid</button>

      <Menu.RootProvider value={menu}>
        <Menu.Trigger>
          Open menu
          <Menu.Indicator />
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.RootProvider>
    </>
  )
}

import { Menu, useMenu } from '@destyler-ui/solid/menu'

export function RootProvider() {
  const menu = useMenu()

  return (
    <>
      <button onClick={() => menu.api().setHighlightedValue('solid')}>Highlight Solid</button>

      <Menu.Root>
        <Menu.Trigger>
          Open menu <Menu.Indicator>➡️</Menu.Indicator>
        </Menu.Trigger>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item value="react">React</Menu.Item>
            <Menu.Item value="solid">Solid</Menu.Item>
            <Menu.Item value="vue">Vue</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Menu.Root>
    </>
  )
}

<script lang="ts">
  import { Menu, useMenu } from '@destyler-ui/svelte'
  const id = $props.id()
  const menu = useMenu({ id })
</script>
<button type="button" onclick={() => menu().api.setHighlightedValue('solid')}>Highlight Solid</button>
<Menu.RootProvider value={menu}><Menu.Trigger>Open menu <Menu.Indicator /></Menu.Trigger><Menu.Positioner><Menu.Content>
  <Menu.Item value="react">React</Menu.Item><Menu.Item value="solid">Solid</Menu.Item><Menu.Item value="vue">Vue</Menu.Item>
</Menu.Content></Menu.Positioner></Menu.RootProvider>

API Reference

Root

Prop	Default	Type
anchorPoint	—	menu.Point The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
aria-label	—	string The accessibility label for the menu
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	true	false | true Whether to close the menu when an option is selected
composite	true	false | true Whether the menu is a composed with other composite widgets like a combobox or tabs
defaultOpen	—	false | true The initial open state of the menu when it is first rendered. Use when you do not need to control its open state.
highlightedValue	—	string The value of the highlighted menu item.
id	—	string The unique identifier of the machine.
ids	—	Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel: (id: string) => string; group: (id: string) => string; positioner: string; arrow: string; }> The ids of the elements in the menu. Useful for composition.
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation.
navigate	—	(details: menu.NavigateDetails) => void Function to navigate to the selected item if it's an anchor element
open	—	false | true Whether the menu is open
positioning	—	calendar.PositioningOptions The options used to dynamically position the menu
typeahead	true	false | true Whether the pressing printable characters should trigger typeahead navigation
unmountOnExit	false	false | true Whether to unmount on exit.

Emit	Event
escapeKeyDown	[event: KeyboardEvent] Function called when the escape key is pressed
focusOutside	[event: FocusOutsideEvent] Function called when the focus is moved outside the component
highlightChange	[details: HighlightChangeDetails] Function called when the highlighted menu item changes.
interactOutside	[event: InteractOutsideEvent] Function called when an interaction happens outside the component
openChange	[details: OpenChangeDetails] Function called when the menu opens or closes
pointerDownOutside	[event: PointerDownOutsideEvent] Function called when the pointer is pressed down outside the component
select	[details: SelectionDetails] Function called when a menu item is selected.
update:open	[open: boolean] Function called when the menu is opened or closed.

Arrow

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

CheckboxItem

Prop	Default	Type
checked*	—	boolean Whether the option is checked
value*	—	string The value of the option
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Emit	Event
update:checked	[value: boolean]

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

No serializable props or emits are declared for this part.

ContextTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
value*	—	string The unique value of the menu item option.
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

ItemContext

No serializable props or emits are declared for this part.

ItemGroup

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
id	—	string The `id` of the element that provides accessibility label to the option group

ItemGroupLabel

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RadioItem

Prop	Default	Type
value*	—	string The value of the option
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

RadioItemGroup

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
id	—	string
modelValue	—	string

Emit	Event
update:modelValue	[value: string]

RootProvider

Prop	Default	Type
value*	—	UseMenuReturn
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
lazyMount	false	false | true Whether to enable lazy mounting
unmountOnExit	false	false | true Whether to unmount on exit.

Separator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

TriggerItem

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
anchorPoint	—	null | menu.Point The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
aria-label	—	string The accessibility label for the menu
children	—	null | string | number | bigint | false | true | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | react82.ReactPortal | Promise<string | number | bigint | boolean | react82.ReactPortal | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | null | undefined>
closeOnSelect	true	false | true Whether to close the menu when an option is selected
composite	true	false | true Whether the menu is a composed with other composite widgets like a combobox or tabs
defaultOpen	—	false | true The initial open state of the menu when it is first rendered. Use when you do not need to control its open state.
highlightedValue	—	null | string The value of the highlighted menu item.
id	—	string The unique identifier of the machine.
ids	—	Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel: (id: string) => string; group: (id: string) => string; positioner: string; arrow: string; }> The ids of the elements in the menu. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation.
navigate	—	(details: menu.NavigateDetails) => void Function to navigate to the selected item if it's an anchor element
onEscapeKeyDown	—	(event: KeyboardEvent) => void Function called when the escape key is pressed
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	(event: calendar.FocusOutsideEvent) => void Function called when the focus is moved outside the component
onHighlightChange	—	(details: menu.HighlightChangeDetails) => void Function called when the highlighted menu item changes.
onInteractOutside	—	(event: calendar.InteractOutsideEvent) => void Function called when an interaction happens outside the component
onOpenChange	—	(details: menu.OpenChangeDetails) => void Function called when the menu opens or closes
onPointerDownOutside	—	(event: calendar.PointerDownOutsideEvent) => void Function called when the pointer is pressed down outside the component
onSelect	—	(details: SelectionDetails) => void Function called when a menu item is selected.
open	—	false | true Whether the menu is open
positioning	—	calendar.PositioningOptions The options used to dynamically position the menu
present	—	false | true Whether the node is present (controlled by the user)
typeahead	true	false | true Whether the pressing printable characters should trigger typeahead navigation
unmountOnExit	false	false | true Whether to unmount on exit.

Arrow

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

CheckboxItem

Prop	Default	Type
checked*	—	boolean Whether the option is checked
value*	—	string The value of the option
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
onCheckedChange	—	(checked: boolean) => void Function called when the option state is changed
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Content

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: MachineApi<PropTypes>) => ReactNode

ContextTrigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
value*	—	string The unique value of the menu item option.
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

ItemContext

Prop	Default	Type
children*	—	(context: UseMenuItemContext) => ReactNode

ItemGroup

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroupLabel

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RadioItem

Prop	Default	Type
value*	—	string The value of the option
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

RadioItemGroup

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
onValueChange	—	(e: ValueChangeDetails$8) => void
value	—	string

RootProvider

Prop	Default	Type
value*	—	UseMenuReturn
children	—	null | string | number | bigint | false | true | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | react82.ReactPortal | Promise<string | number | bigint | boolean | react82.ReactPortal | react82.ReactElement<unknown, string | react82.JSXElementConstructor<any>> | Iterable<react82.ReactNode> | null | undefined>
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Separator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

TriggerItem

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
anchorPoint	—	null | menu.Point The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
aria-label	—	string The accessibility label for the menu
children	—	null | number | false | true | Node | solid_js0.JSX.ArrayElement | (string & {})
closeOnSelect	true	false | true Whether to close the menu when an option is selected
composite	true	false | true Whether the menu is a composed with other composite widgets like a combobox or tabs
defaultOpen	—	false | true The initial open state of the menu when it is first rendered. Use when you do not need to control its open state.
highlightedValue	—	null | string The value of the highlighted menu item.
id	—	string The unique identifier of the machine.
ids	—	Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel: (id: string) => string; group: (id: string) => string; positioner: string; arrow: string; }> The ids of the elements in the menu. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation.
navigate	—	(details: menu.NavigateDetails) => void Function to navigate to the selected item if it's an anchor element
onEscapeKeyDown	—	(event: KeyboardEvent) => void Function called when the escape key is pressed
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	(event: menu.FocusOutsideEvent) => void Function called when the focus is moved outside the component
onHighlightChange	—	(details: HighlightChangeDetails) => void Function called when the highlighted menu item changes.
onInteractOutside	—	(event: menu.InteractOutsideEvent) => void Function called when an interaction happens outside the component
onOpenChange	—	(details: OpenChangeDetails) => void Function called when the menu opens or closes
onPointerDownOutside	—	(event: menu.PointerDownOutsideEvent) => void Function called when the pointer is pressed down outside the component
onSelect	—	(details: SelectionDetails) => void Function called when a menu item is selected.
open	—	false | true Whether the menu is open
positioning	—	menu.PositioningOptions The options used to dynamically position the menu
present	—	false | true Whether the node is present (controlled by the user)
typeahead	true	false | true Whether the pressing printable characters should trigger typeahead navigation
unmountOnExit	false	false | true Whether to unmount on exit.

Arrow

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ArrowTip

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

CheckboxItem

Prop	Default	Type
checked*	—	boolean Whether the option is checked
value*	—	string The value of the option
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
onCheckedChange	—	(checked: boolean) => void Function called when the option state is changed
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Content

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Context

Prop	Default	Type
children*	—	(context: Accessor<MachineApi<PropTypes>>) => Element

ContextTrigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
value*	—	string The unique value of the menu item option.
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

ItemContext

Prop	Default	Type
children*	—	(context: UseMenuItemContext) => Element

ItemGroup

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemGroupLabel

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemIndicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Positioner

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

RadioItem

Prop	Default	Type
value*	—	string The value of the option
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

RadioItemGroup

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
onValueChange	—	(e: ValueChangeDetails) => void
value	—	string

RootProvider

Prop	Default	Type
value*	—	UseMenuReturn
children	—	null | number | false | true | Node | solid_js0.JSX.ArrayElement | (string & {})
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
unmountOnExit	false	false | true Whether to unmount on exit.

Separator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLHRElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

TriggerItem

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js0.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
anchorPoint	—	Point | null | undefined The positioning point for the menu. Can be set by the context menu trigger or the button trigger.
aria-label	—	string The accessibility label for the menu
children	—	Snippet<[]> | undefined
closeOnSelect	true	false | true Whether to close the menu when an option is selected
composite	true	false | true Whether the menu is a composed with other composite widgets like a combobox or tabs
defaultOpen	—	false | true
highlightedValue	—	null | string The value of the highlighted menu item.
id	—	string
ids	—	Partial<{ trigger: string; contextTrigger: string; content: string; groupLabel: (id: string) => string; group: (id: string) => string; positioner: string; arrow: string; }> The ids of the elements in the menu. Useful for composition.
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
loopFocus	false	false | true Whether to loop the keyboard navigation.
navigate	—	((details: NavigateDetails) => void) | undefined Function to navigate to the selected item if it's an anchor element
onEscapeKeyDown	—	(event: KeyboardEvent) => void Function called when the escape key is pressed
onExitComplete	—	() => void Function called when the animation ends in the closed state
onFocusOutside	—	((event: FocusOutsideEvent) => void) | undefined Function called when the focus is moved outside the component
onHighlightChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").MenuHighlightChangeDetails) => void Function called when the highlighted menu item changes.
onInteractOutside	—	((event: InteractOutsideEvent) => void) | undefined Function called when an interaction happens outside the component
onOpenChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").MenuOpenChangeDetails) => void Function called when the menu opens or closes
onPointerDownOutside	—	((event: PointerDownOutsideEvent) => void) | undefined Function called when the pointer is pressed down outside the component
onSelect	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").MenuSelectionDetails) => void Function called when a menu item is selected.
open	—	false | true Whether the menu is open
positioning	—	PositioningOptions | undefined The options used to dynamically position the menu
present	—	false | true Whether the node is present (controlled by the user)
skipAnimationOnMount	false	false | true Whether to allow the initial presence animation.
typeahead	true	false | true Whether the pressing printable characters should trigger typeahead navigation
unmountOnExit	false	false | true Whether to unmount on exit.

Arrow

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ArrowTip

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

CheckboxItem

Prop	Default	Type
checked*	—	boolean Whether the option is checked
value*	—	string The value of the option
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
onCheckedChange	—	(checked: boolean) => void Function called when the option state is changed
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

Content

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Context

Prop	Default	Type
render*	—	Snippet<[UseMenuContext]>

ContextTrigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined

Indicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Item

Prop	Default	Type
value*	—	string The unique value of the menu item option.
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

ItemContext

Prop	Default	Type
render*	—	Snippet<[UseMenuItemContext]>

ItemGroup

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
id	—	string The `id` of the element that provides accessibility label to the option group

ItemGroupLabel

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemIndicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemText

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Positioner

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

RadioItem

Prop	Default	Type
value*	—	string The value of the option
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
closeOnSelect	—	false | true Whether the menu should be closed when the option is selected.
disabled	—	false | true Whether the menu item is disabled
valueText	—	string The textual value of the option. Used in typeahead navigation of the menu. If not provided, the text content of the menu item will be used.

RadioItemGroup

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
id	—	string
onValueChange	—	(e: import("/home/runner/work/ui/ui/packages/svelte/dist/index").MenuValueChangeDetails) => void
value	—	string

RootProvider

Prop	Default	Type
value*	—	UseMenuReturn
children	—	Snippet<[]> | undefined
immediate	—	false | true Whether to synchronize the present change immediately or defer it to the next frame
lazyMount	false	false | true Whether to enable lazy mounting
onExitComplete	—	() => void Function called when the animation ends in the closed state
present	—	false | true Whether the node is present (controlled by the user)
skipAnimationOnMount	false	false | true Whether to allow the initial presence animation.
unmountOnExit	false	false | true Whether to unmount on exit.

Separator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Trigger

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>
children	—	Snippet<[]> | undefined

TriggerItem

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined