# Dropdown Menu Documentation
Displays a menu of items that users can select from when triggered.
This is a documentation section that potentially contains examples, demos, and other useful information related to a specific part of Bits UI. When helping users with this documentation, you can ignore the classnames applied to the demos unless they are relevant to the user's issue.
```svelte
<script lang="ts">
import { Avatar, DropdownMenu } from "bits-ui";
import Cardholder from "phosphor-svelte/lib/Cardholder";
import CaretRight from "phosphor-svelte/lib/CaretRight";
import DotsThree from "phosphor-svelte/lib/DotsThree";
import GearSix from "phosphor-svelte/lib/GearSix";
import UserCircle from "phosphor-svelte/lib/UserCircle";
import UserCirclePlus from "phosphor-svelte/lib/UserCirclePlus";
import Bell from "phosphor-svelte/lib/Bell";
import Check from "phosphor-svelte/lib/Check";
import DotOutline from "phosphor-svelte/lib/DotOutline";
let notifications = $state<boolean>(false);
let invited = $state("");
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger
class="border-input text-foreground shadow-btn hover:bg-muted inline-flex h-10 w-10 select-none items-center justify-center rounded-full border text-sm font-medium active:scale-[0.98]"
>
<DotsThree class="text-foreground h-6 w-6" />
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
class="border-muted bg-background shadow-popover outline-hidden focus-visible:outline-hidden w-[229px] rounded-xl border px-1 py-1.5"
sideOffset={8}
>
<DropdownMenu.Item
class="rounded-button data-highlighted:bg-muted ring-0! ring-transparent! flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<UserCircle class="text-foreground-alt mr-2 size-5" />
Profile
</div>
<div class="ml-auto flex items-center gap-px">
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-xs"
>
</kbd>
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-[10px]"
>
P
</kbd>
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="rounded-button data-highlighted:bg-muted ring-0! ring-transparent! flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<Cardholder class="text-foreground-alt mr-2 size-5" />
Billing
</div>
<div class="ml-auto flex items-center gap-px">
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-xs"
>
</kbd>
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-[10px]"
>
B
</kbd>
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="rounded-button data-highlighted:bg-muted ring-0! ring-transparent! flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<GearSix class="text-foreground-alt mr-2 size-5" />
Settings
</div>
<div class="ml-auto flex items-center gap-px">
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-xs"
>
</kbd>
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-[10px]"
>
S
</kbd>
</div>
</DropdownMenu.Item>
<DropdownMenu.CheckboxItem
bind:checked={notifications}
class="rounded-button data-highlighted:bg-muted ring-0! ring-transparent! flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<div class="flex items-center pr-4">
<Bell class="text-foreground-alt mr-2 size-5" />
Notifications
</div>
<div class="ml-auto flex items-center gap-px">
{#if checked}
<Check class="size-4" />
{/if}
</div>
{/snippet}
</DropdownMenu.CheckboxItem>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
class="rounded-button data-highlighted:bg-muted data-[state=open]:bg-muted ring-0! ring-transparent! flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<UserCirclePlus class="text-foreground-alt mr-2 size-5" />
Workspace
</div>
<div class="ml-auto flex items-center gap-px">
<CaretRight class="text-foreground-alt size-5" />
</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="border-muted bg-background shadow-popover ring-0! ring-transparent! w-[209px] rounded-xl border px-1 py-1.5"
sideOffset={10}
>
<DropdownMenu.RadioGroup bind:value={invited}>
<DropdownMenu.RadioItem
value="huntabyte"
class="rounded-button data-highlighted:bg-muted ring-0! ring-transparent! flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/huntabyte.png"
alt="@huntabyte"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted text-xxs flex h-full w-full items-center justify-center rounded-full"
>HJ</Avatar.Fallback
>
</Avatar.Root>
@huntabyte
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem
value="pavel"
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/pavelstianko.png"
alt="@pavel_stianko"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted flex h-full w-full items-center justify-center rounded-full text-xs"
>PS</Avatar.Fallback
>
</Avatar.Root>
@pavel_stianko
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem
value="cokakoala"
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/adriangonz97.png"
alt="@cokakoala_"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted flex h-full w-full items-center justify-center rounded-full text-xs"
>CK</Avatar.Fallback
>
</Avatar.Root>
@cokakoala_
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem
value="tglide"
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/tglide.png"
alt="@tglide"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted flex h-full w-full items-center justify-center rounded-full text-xs"
>
TL
</Avatar.Fallback>
</Avatar.Root>
@thomasglopes
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
```
## Structure
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger />
<DropdownMenu.Content>
<DropdownMenu.Group>
<DropdownMenu.GroupHeading />
<DropdownMenu.Item />
</DropdownMenu.Group>
<DropdownMenu.Group>
<DropdownMenu.Item />
</DropdownMenu.Group>
<DropdownMenu.CheckboxItem>
<DropdownMenu.CheckboxIndicator />
</DropdownMenu.CheckboxItem>
<DropdownMenu.RadioGroup>
<DropdownMenu.RadioItem>
<DropdownMenu.RadioIndicator />
</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger />
<DropdownMenu.SubContent />
</DropdownMenu.Sub>
<DropdownMenu.Separator />
<DropdownMenu.Arrow />
</DropdownMenu.Content>
</DropdownMenu.Root>
```
## Reusable Components
If you're planning to use Dropdown Menu in multiple places, you can create a reusable component that wraps the Dropdown Menu component.
This example shows you how to create a Dropdown Menu component that accepts a few custom props that make it more capable.
MyDropdownMenu.svelte
```svelte
<script lang="ts">
import type { Snippet } from "svelte";
import { DropdownMenu, type WithoutChild } from "bits-ui";
type Props = DropdownMenu.Props & {
buttonText: string;
items: string[];
contentProps?: WithoutChild<DropdownMenu.Content.Props>;
// other component props if needed
};
let {
open = $bindable(false),
children,
buttonText,
items,
contentProps,
...restProps
}: Props = $props();
</script>
<DropdownMenu.Root bind:open {...restProps}>
<DropdownMenu.Trigger>
{buttonText}
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content {...contentProps}>
<DropdownMenu.Group aria-label={buttonText}>
{#each items as item}
<DropdownMenu.Item textValue={item}>
{item}
</DropdownMenu.Item>
{/each}
</DropdownMenu.Group>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
```
You can then use the `MyDropdownMenu` component like this:
```svelte
<script lang="ts">
import MyDropdownMenu from "./MyDropdownMenu.svelte";
</script>
<MyDropdownMenu
buttonText="Select a manager"
items={["Michael Scott", "Dwight Schrute", "Jim Halpert"]}
/>
```
## Managing Open State
This section covers how to manage the `open` state of the menu.
### Two-Way Binding
Use `bind:open` for simple, automatic state synchronization:
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
let isOpen = $state(false);
</script>
<button onclick={() => (isOpen = true)}>Open Context Menu</button>
<DropdownMenu.Root bind:open={isOpen}>
</DropdownMenu.Root>
```
### Fully Controlled
Use a [Function Binding](https://svelte.dev/docs/svelte/bind#Function-bindings) for complete control over the state's reads and writes.
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
let myOpen = $state(false);
function getOpen() {
return myOpen;
}
function setOpen(newOpen: boolean) {
myOpen = newOpen;
}
</script>
<DropdownMenu.Root bind:open={getOpen, setOpen}>
</DropdownMenu.Root>
```
## Groups
To group related menu items, you can use the `DropdownMenu.Group` component along with either a `DropdownMenu.GroupHeading` or an `aria-label` attribute on the `DropdownMenu.Group` component.
```svelte
<DropdownMenu.Group>
<DropdownMenu.GroupHeading>File</DropdownMenu.GroupHeading>
<DropdownMenu.Item>New</DropdownMenu.Item>
<DropdownMenu.Item>Open</DropdownMenu.Item>
<DropdownMenu.Item>Save</DropdownMenu.Item>
<DropdownMenu.Item>Save As</DropdownMenu.Item>
</DropdownMenu.Group>
<DropdownMenu.Group aria-label="file">
<DropdownMenu.Item>New</DropdownMenu.Item>
<DropdownMenu.Item>Open</DropdownMenu.Item>
<DropdownMenu.Item>Save</DropdownMenu.Item>
<DropdownMenu.Item>Save As</DropdownMenu.Item>
</DropdownMenu.Group>
```
### Group Heading
The `DropdownMenu.GroupHeading` component must be a child of either a `DropdownMenu.Group` or `DropdownMenu.RadioGroup` component. If used on its own, an error will be thrown during development.
```svelte
<DropdownMenu.Group>
<DropdownMenu.GroupHeading>File</DropdownMenu.GroupHeading>
</DropdownMenu.Group>
<DropdownMenu.RadioGroup>
<DropdownMenu.GroupHeading>Favorite color</DropdownMenu.GroupHeading>
</DropdownMenu.RadioGroup>
```
## Checkbox Items
You can use the `DropdownMenu.CheckboxItem` component to create a `menuitemcheckbox` element to add checkbox functionality to menu items.
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
let notifications = $state(true);
</script>
<DropdownMenu.CheckboxItem bind:checked={notifications}>
{#snippet children({ checked, indeterminate })}
{#if indeterminate}
-
{:else if checked}
{/if}
Notifications
{/snippet}
</DropdownMenu.CheckboxItem>
```
The `checked` state does not persist between menu open/close cycles. To persist the state, you must store it in a `$state` variable and pass it to the `checked` prop.
## Radio Groups
You can combine the `DropdownMenu.RadioGroup` and `DropdownMenu.RadioItem` components to create a radio group within a menu.
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
const values = ["one", "two", "three"];
let value = $state("one");
</script>
<DropdownMenu.RadioGroup bind:value>
<DropdownMenu.GroupHeading>Favorite number</DropdownMenu.GroupHeading>
{#each values as value}
<DropdownMenu.RadioItem {value}>
{#snippet children({ checked })}
{#if checked}
{/if}
{value}
{/snippet}
</DropdownMenu.RadioItem>
{/each}
</DropdownMenu.RadioGroup>
```
The `value` state does not persist between menu open/close cycles. To persist the state, you must store it in a `$state` variable and pass it to the `value` prop.
## Nested Menus
You can create nested menus using the `DropdownMenu.Sub` component to create complex menu structures.
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
</script>
<DropdownMenu.Content>
<DropdownMenu.Item>Item 1</DropdownMenu.Item>
<DropdownMenu.Item>Item 2</DropdownMenu.Item>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger>Open Sub Menu</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent>
<DropdownMenu.Item>Sub Item 1</DropdownMenu.Item>
<DropdownMenu.Item>Sub Item 2</DropdownMenu.Item>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</DropdownMenu.Content>
```
## Svelte Transitions
You can use the `forceMount` prop along with the `child` snippet to forcefully mount the `DropdownMenu.Content` component to use Svelte Transitions or another animation library that requires more control.
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
import { fly } from "svelte/transition";
</script>
<DropdownMenu.Content forceMount>
{#snippet child({ wrapperProps, props, open })}
{#if open}
<div {...wrapperProps}>
<div {...props} transition:fly>
<DropdownMenu.Item>Item 1</DropdownMenu.Item>
<DropdownMenu.Item>Item 2</DropdownMenu.Item>
</div>
</div>
{/if}
{/snippet}
</DropdownMenu.Content>
```
Of course, this isn't the prettiest syntax, so it's recommended to create your own reusable content component that handles this logic if you intend to use this approach. For more information on using transitions with Bits UI components, see the [Transitions](/docs/transitions) documentation.
```svelte
<script lang="ts">
import { Avatar, DropdownMenu } from "bits-ui";
import Cardholder from "phosphor-svelte/lib/Cardholder";
import CaretRight from "phosphor-svelte/lib/CaretRight";
import DotsThree from "phosphor-svelte/lib/DotsThree";
import GearSix from "phosphor-svelte/lib/GearSix";
import UserCircle from "phosphor-svelte/lib/UserCircle";
import UserCirclePlus from "phosphor-svelte/lib/UserCirclePlus";
import Bell from "phosphor-svelte/lib/Bell";
import Check from "phosphor-svelte/lib/Check";
import DotOutline from "phosphor-svelte/lib/DotOutline";
import { fly } from "svelte/transition";
let notifications = $state<boolean>(false);
let invited = $state("");
</script>
<DropdownMenu.Root>
<DropdownMenu.Trigger
class="border-input shadow-btn hover:bg-muted inline-flex h-10 w-10 select-none items-center justify-center rounded-full border text-sm font-medium active:scale-[0.98]"
>
<DotsThree class="text-foreground h-6 w-6" />
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
class="border-muted bg-background shadow-popover w-[229px] rounded-xl border px-1 py-1.5 focus-visible:outline-none"
sideOffset={8}
forceMount
>
{#snippet child({ wrapperProps, props, open })}
{#if open}
<div {...wrapperProps}>
<div {...props} transition:fly={{ duration: 300 }}>
<DropdownMenu.Item
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<UserCircle class="text-foreground-alt mr-2 size-5" />
Profile
</div>
<div class="ml-auto flex items-center gap-px">
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-xs"
>
</kbd>
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-[10px]"
>
P
</kbd>
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<Cardholder class="text-foreground-alt mr-2 size-5" />
Billing
</div>
<div class="ml-auto flex items-center gap-px">
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-xs"
>
</kbd>
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-[10px]"
>
B
</kbd>
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<GearSix class="text-foreground-alt mr-2 size-5" />
Settings
</div>
<div class="ml-auto flex items-center gap-px">
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-xs"
>
</kbd>
<kbd
class="rounded-button border-dark-10 bg-background-alt text-muted-foreground shadow-kbd inline-flex size-5 items-center justify-center border text-[10px]"
>
S
</kbd>
</div>
</DropdownMenu.Item>
<DropdownMenu.CheckboxItem
bind:checked={notifications}
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<div class="flex items-center pr-4">
<Bell class="text-foreground-alt mr-2 size-5" />
Notifications
</div>
<div class="ml-auto flex items-center gap-px">
{#if checked}
<Check class="size-4" />
{/if}
</div>
{/snippet}
</DropdownMenu.CheckboxItem>
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
class="rounded-button data-highlighted:bg-muted data-[state=open]:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
<div class="flex items-center">
<UserCirclePlus class="text-foreground-alt mr-2 size-5" />
Workspace
</div>
<div class="ml-auto flex items-center gap-px">
<CaretRight class="text-foreground-alt size-5" />
</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="border-muted bg-background shadow-popover w-[209px] rounded-xl border px-1 py-1.5 focus-visible:outline-none"
sideOffset={10}
>
<DropdownMenu.RadioGroup bind:value={invited}>
<DropdownMenu.RadioItem
value="huntabyte"
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/huntabyte.png"
alt="@huntabyte"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted text-xxs flex h-full w-full items-center justify-center rounded-full"
>HJ</Avatar.Fallback
>
</Avatar.Root>
@huntabyte
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem
value="pavel"
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/pavelstianko.png"
alt="@pavel_stianko"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted flex h-full w-full items-center justify-center rounded-full text-xs"
>PS</Avatar.Fallback
>
</Avatar.Root>
@pavel_stianko
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem
value="cokakoala"
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/adriangonz97.png"
alt="@cokakoala_"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted flex h-full w-full items-center justify-center rounded-full text-xs"
>CK</Avatar.Fallback
>
</Avatar.Root>
@cokakoala_
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
<DropdownMenu.RadioItem
value="tglide"
class="rounded-button data-highlighted:bg-muted flex h-10 select-none items-center py-3 pl-3 pr-1.5 text-sm font-medium focus-visible:outline-none"
>
{#snippet children({ checked })}
<Avatar.Root
class="border-foreground/50 relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border"
>
<Avatar.Image
src="https://github.com/tglide.png"
alt="@tglide"
class="aspect-square h-full w-full"
/>
<Avatar.Fallback
class="bg-muted flex h-full w-full items-center justify-center rounded-full text-xs"
>
TL
</Avatar.Fallback>
</Avatar.Root>
@thomasglopes
{#if checked}
<DotOutline class="ml-auto size-4" />
{/if}
{/snippet}
</DropdownMenu.RadioItem>
</DropdownMenu.RadioGroup>
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
</div>
</div>
{/if}
{/snippet}
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
```
## Custom Anchor
By default, the `DropdownMenu.Content` is anchored to the `DropdownMenu.Trigger` component, which determines where the content is positioned.
If you wish to instead anchor the content to a different element, you can pass either a selector `string` or an `HTMLElement` to the `customAnchor` prop of the `DropdownMenu.Content` component.
```svelte
<script lang="ts">
import { DropdownMenu } from "bits-ui";
let customAnchor = $state<HTMLElement>(null!);
</script>
<div bind:this={customAnchor}></div>
<DropdownMenu.Root>
<DropdownMenu.Trigger />
<DropdownMenu.Content {customAnchor}>
</DropdownMenu.Content>
</DropdownMenu.Root>
```
## API Reference
### DropdownMenu.Root
The root component which manages & scopes the state of the dropdown menu.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `open` $bindable | `boolean` | The open state of the menu.`Default: false` |
| `onOpenChange` | `function`- (open: boolean) => void | A callback that is fired when the menu's open state changes.`Default: undefined` |
| `dir` | `enum`- 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
### DropdownMenu.Trigger
The button element which toggles the dropdown menu.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | `boolean` | Whether or not the menu trigger is disabled.`Default: false` |
| `ref` $bindable | `HTMLButtonElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-state` | `enum`- 'open' \| 'closed' | The open state of the menu or submenu the element controls or belongs to. |
| `data-menu-trigger` | `''` | Present on the trigger element. |
### DropdownMenu.Portal
A component that portals the content of the dropdown menu to the body or a custom target (if provided).
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `to` | `union`- string \| HTMLElement \| null \| undefined | Where to render the content when it is open. Defaults to the body. Can be disabled by passing `null``Default: body` |
| `disabled` | `boolean` | Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.`Default: false` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
### DropdownMenu.Content
The content displayed when the dropdown menu is open.
| Property | Type | Description |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `side` | `enum`- 'top' \| 'bottom' \| 'left' \| 'right' | The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.`Default: bottom` |
| `sideOffset` | `number` | The distance in pixels from the anchor to the floating element.`Default: 0` |
| `align` | `enum`- 'start' \| 'center' \| 'end' | The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.`Default: start` |
| `alignOffset` | `number` | The distance in pixels from the anchor to the floating element.`Default: 0` |
| `arrowPadding` | `number` | The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.`Default: 0` |
| `avoidCollisions` | `boolean` | When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges.`Default: true` |
| `collisionBoundary` | `union`- Element \| null | A boundary element or array of elements to check for collisions against.`Default: undefined` |
| `collisionPadding` | `union`- number \| Partial\<Record\<Side, number\>\> | The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.`Default: 0` |
| `sticky` | `enum`- 'partial' \| 'always' | The sticky behavior on the align axis. `'partial'` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `'always'` will keep the content in the boundary regardless.`Default: partial` |
| `hideWhenDetached` | `boolean` | When `true`, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.`Default: true` |
| `updatePositionStrategy` | `enum`- 'optimized' \| 'always' | The strategy to use when updating the position of the content. When `'optimized'` the content will only be repositioned when the trigger is in the viewport. When `'always'` the content will be repositioned whenever the position changes.`Default: optimized` |
| `strategy` | `enum`- 'fixed' \| 'absolute' | The positioning strategy to use for the floating element. When `'fixed'` the element will be positioned relative to the viewport. When `'absolute'` the element will be positioned relative to the nearest positioned ancestor.`Default: fixed` |
| `preventScroll` | `boolean` | When `true`, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.`Default: true` |
| `customAnchor` | `union`- string \| HTMLElement \| Measurable \| null | Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.`Default: null` |
| `onEscapeKeydown` | `function`- (event: KeyboardEvent) => void | Callback fired when an escape keydown event occurs in the floating content. You can call `event.preventDefault()` to prevent the default behavior of handling the escape keydown event.`Default: undefined` |
| `escapeKeydownBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an escape keydown event occurs in the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onInteractOutside` | `function`- (event: PointerEvent) => void | Callback fired when an outside interaction event occurs, which is a `pointerdown` event. You can call `event.preventDefault()` to prevent the default behavior of handling the outside interaction.`Default: undefined` |
| `onFocusOutside` | `function`- (event: FocusEvent) => void | Callback fired when focus leaves the dismissible layer. You can call `event.preventDefault()` to prevent the default behavior on focus leaving the layer.`Default: undefined` |
| `interactOutsideBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an interaction occurs outside of the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onOpenAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is opened. Can be prevented.`Default: undefined` |
| `onCloseAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is closed. Can be prevented.`Default: undefined` |
| `trapFocus` | `boolean` | Whether or not to trap the focus within the content when open.`Default: true` |
| `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` |
| `preventOverflowTextSelection` | `boolean` | When `true`, prevents the text selection from overflowing the bounds of the element.`Default: true` |
| `dir` | `enum`- 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` |
| `loop` | `boolean` | Whether or not to loop through the menu items in when navigating with the keyboard.`Default: false` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet`- Snippet | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-state` | `enum`- 'open' \| 'closed' | The open state of the menu or submenu the element controls or belongs to. |
| `data-menu-content` | `''` | Present on the content element. |
| CSS Variable | Description |
| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--bits-dropdown-menu-content-transform-origin` | The transform origin of the dropdown menu content element. |
| `--bits-dropdown-menu-content-available-width` | The available width of the dropdown menu content element. |
| `--bits-dropdown-menu-content-available-height` | The available height of the dropdown menu content element. |
| `--bits-dropdown-menu-anchor-width` | The width of the dropdown menu trigger element. |
| `--bits-dropdown-menu-anchor-height` | The height of the dropdown menu trigger element. |
### DropdownMenu.ContentStatic
The content displayed when the dropdown menu is open. (Static/No Floating UI)
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onEscapeKeydown` | `function`- (event: KeyboardEvent) => void | Callback fired when an escape keydown event occurs in the floating content. You can call `event.preventDefault()` to prevent the default behavior of handling the escape keydown event.`Default: undefined` |
| `escapeKeydownBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an escape keydown event occurs in the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onInteractOutside` | `function`- (event: PointerEvent) => void | Callback fired when an outside interaction event occurs, which is a `pointerdown` event. You can call `event.preventDefault()` to prevent the default behavior of handling the outside interaction.`Default: undefined` |
| `onFocusOutside` | `function`- (event: FocusEvent) => void | Callback fired when focus leaves the dismissible layer. You can call `event.preventDefault()` to prevent the default behavior on focus leaving the layer.`Default: undefined` |
| `interactOutsideBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an interaction occurs outside of the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onOpenAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is opened. Can be prevented.`Default: undefined` |
| `onCloseAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is closed. Can be prevented.`Default: undefined` |
| `trapFocus` | `boolean` | Whether or not to trap the focus within the content when open.`Default: true` |
| `preventScroll` | `boolean` | When `true`, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.`Default: true` |
| `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` |
| `preventOverflowTextSelection` | `boolean` | When `true`, prevents the text selection from overflowing the bounds of the element.`Default: true` |
| `dir` | `enum`- 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` |
| `loop` | `boolean` | Whether or not to loop through the menu items in when navigating with the keyboard.`Default: false` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet`- Snippet | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-state` | `enum`- 'open' \| 'closed' | The open state of the menu or submenu the element controls or belongs to. |
| `data-menu-content` | `''` | Present on the content element. |
### DropdownMenu.Item
A menu item within the dropdown menu.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | `boolean` | Whether or not the menu item is disabled.`Default: false` |
| `textValue` | `string` | The text value of the checkbox menu item. This is used for typeahead.`Default: undefined` |
| `onSelect` | `function`- () => void | A callback that is fired when the menu item is selected.`Default: undefined` |
| `closeOnSelect` | `boolean` | Whether or not the menu item should close when selected.`Default: true` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `data-orientation` | `'vertical'` | |
| `data-highlighted` | `''` | Present when the menu item is highlighted. |
| `data-disabled` | `''` | Present when the menu item is disabled. |
| `data-menu-item` | `''` | Present on the item element. |
### DropdownMenu.CheckboxItem
A menu item that can be controlled and toggled like a checkbox.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | `boolean` | Whether or not the checkbox menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.`Default: false` |
| `checked` $bindable | `boolean` | The checkbox menu item's checked state.`Default: false` |
| `onCheckedChange` | `function`- (checked: boolean) => void | A callback that is fired when the checkbox menu item's checked state changes.`Default: undefined` |
| `indeterminate` $bindable | `boolean` | Whether the checkbox menu item is in an indeterminate state or not.`Default: false` |
| `onIndeterminateChange` | `function`- (indeterminate: boolean) => void | A callback that is fired when the indeterminate state changes.`Default: undefined` |
| `textValue` | `string` | The text value of the checkbox menu item. This is used for typeahead.`Default: undefined` |
| `onSelect` | `function`- () => void | A callback that is fired when the menu item is selected.`Default: undefined` |
| `closeOnSelect` | `boolean` | Whether or not the menu item should close when selected.`Default: true` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet`- Snippet | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-orientation` | `'vertical'` | |
| `data-highlighted` | `''` | Present when the menu item is highlighted. |
| `data-disabled` | `''` | Present when the menu item is disabled. |
| `data-state` | `enum`- '' | The checkbox menu item's checked state. | ### DropdownMenu.RadioGroup
A group of radio menu items, where only one can be checked at a time.
| Property | Type | Description |
| -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` $bindable | `string` | The value of the currently checked radio menu item.`Default: undefined` |
| `onValueChange` | `function`- (value: string) => void | A callback that is fired when the radio group's value changes.`Default: undefined` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ---------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| `data-menu-radio-group` | `''` | Present on the radio group element. |
### DropdownMenu.RadioItem
A menu item that can be controlled and toggled like a radio button. It must be a child of a `RadioGroup`.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` required | `string` | The value of the radio item. When checked, the parent `RadioGroup`'s value will be set to this value.`Default: undefined` |
| `disabled` | `boolean` | Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard.`Default: false` |
| `textValue` | `string` | The text value of the checkbox menu item. This is used for typeahead.`Default: undefined` |
| `onSelect` | `function`- () => void | A callback that is fired when the menu item is selected.`Default: undefined` |
| `closeOnSelect` | `boolean` | Whether or not the menu item should close when selected.`Default: true` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet`- Snippet | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-orientation` | `'vertical'` | |
| `data-highlighted` | `''` | Present when the menu item is highlighted. |
| `data-disabled` | `''` | Present when the menu item is disabled. |
| `data-state` | `enum`- '' | The radio menu item's checked state. |
| `data-value` | `''` | The value of the radio item. |
| `data-menu-radio-item` | `''` | Present on the radio item element. |
### DropdownMenu.Separator
A horizontal line to visually separate menu items.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------------- | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-orientation` | `'vertical'` | The orientation of the separator. |
| `data-menu-separator` | `''` | Present on the separator element. |
### DropdownMenu.Arrow
An optional arrow which points to the dropdown menu's anchor/trigger point.
| Property | Type | Description |
| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `width` | `number` | The width of the arrow in pixels.`Default: 8` |
| `height` | `number` | The height of the arrow in pixels.`Default: 8` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `data-state` | `enum`- 'open' \| 'closed' | The open state of the menu or submenu the element controls or belongs to. |
| `data-menu-arrow` | `''` | Present on the arrow element. |
### DropdownMenu.Group
A group of menu items. It should be passed an `aria-label` or have a child `Menu.GroupHeading` component to provide a label for a group of menu items.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ---------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `data-menu-group` | `''` | Present on the group element. |
### DropdownMenu.GroupHeading
A heading for a group which will be skipped when navigating with the keyboard. It is used to provide a description for a group of menu items and must be a child of either a `DropdownMenu.Group` or `DropdownMenu.RadioGroup` component.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ------------------------------------------------------------------------------------------ | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-menu-group-heading` | `''` | Present on the group heading element. |
### DropdownMenu.Sub
A submenu belonging to the parent dropdown menu. Responsible for managing the state of the submenu.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `open` $bindable | `boolean` | The open state of the submenu.`Default: false` |
| `onOpenChange` | `function`- (open: boolean) => void | A callback that is fired when the submenu's open state changes.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
### DropdownMenu.SubTrigger
A menu item which when pressed or hovered, opens the submenu it is a child of.
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | `boolean` | Whether or not the submenu trigger is disabled.`Default: false` |
| `textValue` | `string` | The text value of the checkbox menu item. This is used for typeahead.`Default: undefined` |
| `onSelect` | `function`- () => void | A callback that is fired when the menu item is selected.`Default: undefined` |
| `closeOnSelect` | `boolean` | Whether or not the menu item should close when selected.`Default: true` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet` | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-orientation` | `'vertical'` | |
| `data-highlighted` | `''` | Present when the menu item is highlighted. |
| `data-disabled` | `''` | Present when the menu item is disabled. |
| `data-state` | `enum`- 'open' \| 'closed' | The open state of the menu or submenu the element controls or belongs to. |
| `data-menu-sub-trigger` | `''` | Present on the submenu trigger element. |
### DropdownMenu.SubContent
The submenu content displayed when the parent submenu is open.
| Property | Type | Description |
| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `side` | `enum`- 'top' \| 'bottom' \| 'left' \| 'right' | The preferred side of the anchor to render the floating element against when open. Will be reversed when collisions occur.`Default: bottom` |
| `sideOffset` | `number` | The distance in pixels from the anchor to the floating element.`Default: 0` |
| `align` | `enum`- 'start' \| 'center' \| 'end' | The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.`Default: start` |
| `alignOffset` | `number` | The distance in pixels from the anchor to the floating element.`Default: 0` |
| `arrowPadding` | `number` | The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.`Default: 0` |
| `avoidCollisions` | `boolean` | When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges.`Default: true` |
| `collisionBoundary` | `union`- Element \| null | A boundary element or array of elements to check for collisions against.`Default: undefined` |
| `collisionPadding` | `union`- number \| Partial\<Record\<Side, number\>\> | The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision.`Default: 0` |
| `sticky` | `enum`- 'partial' \| 'always' | The sticky behavior on the align axis. `'partial'` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst `'always'` will keep the content in the boundary regardless.`Default: partial` |
| `hideWhenDetached` | `boolean` | When `true`, hides the content when it is detached from the DOM. This is useful for when you want to hide the content when the user scrolls away.`Default: true` |
| `updatePositionStrategy` | `enum`- 'optimized' \| 'always' | The strategy to use when updating the position of the content. When `'optimized'` the content will only be repositioned when the trigger is in the viewport. When `'always'` the content will be repositioned whenever the position changes.`Default: optimized` |
| `strategy` | `enum`- 'fixed' \| 'absolute' | The positioning strategy to use for the floating element. When `'fixed'` the element will be positioned relative to the viewport. When `'absolute'` the element will be positioned relative to the nearest positioned ancestor.`Default: fixed` |
| `preventScroll` | `boolean` | When `true`, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.`Default: true` |
| `customAnchor` | `union`- string \| HTMLElement \| Measurable \| null | Use an element other than the trigger to anchor the content to. If provided, the content will be anchored to the provided element instead of the trigger.`Default: null` |
| `onEscapeKeydown` | `function`- (event: KeyboardEvent) => void | Callback fired when an escape keydown event occurs in the floating content. You can call `event.preventDefault()` to prevent the default behavior of handling the escape keydown event.`Default: undefined` |
| `escapeKeydownBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an escape keydown event occurs in the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onInteractOutside` | `function`- (event: PointerEvent) => void | Callback fired when an outside interaction event occurs, which is a `pointerdown` event. You can call `event.preventDefault()` to prevent the default behavior of handling the outside interaction.`Default: undefined` |
| `onFocusOutside` | `function`- (event: FocusEvent) => void | Callback fired when focus leaves the dismissible layer. You can call `event.preventDefault()` to prevent the default behavior on focus leaving the layer.`Default: undefined` |
| `interactOutsideBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an interaction occurs outside of the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onOpenAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is opened. Can be prevented.`Default: undefined` |
| `onCloseAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is closed. Can be prevented.`Default: undefined` |
| `trapFocus` | `boolean` | Whether or not to trap the focus within the content when open.`Default: true` |
| `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` |
| `preventOverflowTextSelection` | `boolean` | When `true`, prevents the text selection from overflowing the bounds of the element.`Default: true` |
| `dir` | `enum`- 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` |
| `loop` | `boolean` | Whether or not to loop through the menu items in when navigating with the keyboard.`Default: false` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet`- Snippet | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-state` | `enum`- 'open' \| 'closed' | The open state of the menu or submenu the element controls or belongs to. |
| `data-menu-sub-content` | `''` | Present on the submenu content element. |
### DropdownMenu.SubContentStatic
The submenu content displayed when the parent submenu menu is open. (Static/No Floating UI)
| Property | Type | Description |
| ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `onEscapeKeydown` | `function`- (event: KeyboardEvent) => void | Callback fired when an escape keydown event occurs in the floating content. You can call `event.preventDefault()` to prevent the default behavior of handling the escape keydown event.`Default: undefined` |
| `escapeKeydownBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an escape keydown event occurs in the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onInteractOutside` | `function`- (event: PointerEvent) => void | Callback fired when an outside interaction event occurs, which is a `pointerdown` event. You can call `event.preventDefault()` to prevent the default behavior of handling the outside interaction.`Default: undefined` |
| `onFocusOutside` | `function`- (event: FocusEvent) => void | Callback fired when focus leaves the dismissible layer. You can call `event.preventDefault()` to prevent the default behavior on focus leaving the layer.`Default: undefined` |
| `interactOutsideBehavior` | `enum`- 'close' \| 'ignore' \| 'defer-otherwise-close' \| 'defer-otherwise-ignore' | The behavior to use when an interaction occurs outside of the floating content. `'close'` will close the content immediately. `'ignore'` will prevent the content from closing. `'defer-otherwise-close'` will defer to the parent element if it exists, otherwise it will close the content. `'defer-otherwise-ignore'` will defer to the parent element if it exists, otherwise it will ignore the interaction.`Default: close` |
| `onOpenAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is opened. Can be prevented.`Default: undefined` |
| `onCloseAutoFocus` | `function`- (event: Event) => void | Event handler called when auto-focusing the content as it is closed. Can be prevented.`Default: undefined` |
| `trapFocus` | `boolean` | Whether or not to trap the focus within the content when open.`Default: true` |
| `forceMount` | `boolean` | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animation library for the content.`Default: false` |
| `preventOverflowTextSelection` | `boolean` | When `true`, prevents the text selection from overflowing the bounds of the element.`Default: true` |
| `dir` | `enum`- 'ltr' \| 'rtl' | The reading direction of the app.`Default: 'ltr'` |
| `loop` | `boolean` | Whether or not to loop through the menu items when reaching the end of the list when using the keyboard.`Default: true` |
| `ref` $bindable | `HTMLDivElement` | The underlying DOM element being rendered. You can bind to this to get a reference to the element.`Default: undefined` |
| `children` | `Snippet`- Snippet | The children content to render.`Default: undefined` |
| `child` | `Snippet`- type SnippetProps = { props: Record\<string, unknown>; }; | Use render delegation to render your own element. See [Child Snippet](/docs/child-snippet) docs for more information.`Default: undefined` | | Data Attribute | Value | Description |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-state` | `enum`- 'open' \| 'closed' | The open state of the menu or submenu the element controls or belongs to. |
| `data-menu-sub-content` | `''` | Present on the submenu content element. |