Menu

tsx

import { Menu, Portal } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<Menu>
			<Menu.Trigger className="btn preset-filled">Open Menu</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu.Item value="new">
							<Menu.ItemText>New File</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="open">
							<Menu.ItemText>Open File</Menu.ItemText>
						</Menu.Item>
						<Menu.Separator />
						<Menu.Item value="save">
							<Menu.ItemText>Save</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="export">
							<Menu.ItemText>Export</Menu.ItemText>
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

svelte

<script lang="ts">
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.Trigger class="btn preset-filled">Open Menu</Menu.Trigger>
	<Portal>
		<Menu.Positioner>
			<Menu.Content>
				<Menu.Item value="new">
					<Menu.ItemText>New File</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="open">
					<Menu.ItemText>Open File</Menu.ItemText>
				</Menu.Item>
				<Menu.Separator />
				<Menu.Item value="save">
					<Menu.ItemText>Save</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="export">
					<Menu.ItemText>Export</Menu.ItemText>
				</Menu.Item>
			</Menu.Content>
		</Menu.Positioner>
	</Portal>
</Menu>

Grouped Items

Use ItemGroup and ItemGroupLabel to organize menu items into logical sections.

tsx

import { Menu, Portal } from '@skeletonlabs/skeleton-react';

export default function Group() {
	return (
		<Menu>
			<Menu.Trigger className="btn preset-filled">View Options</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu.ItemGroup>
							<Menu.ItemGroupLabel>View</Menu.ItemGroupLabel>
							<Menu.Separator />
							<Menu.Item value="split">
								<Menu.ItemText>Split View</Menu.ItemText>
							</Menu.Item>
							<Menu.Item value="fullscreen">
								<Menu.ItemText>Fullscreen</Menu.ItemText>
							</Menu.Item>
						</Menu.ItemGroup>
						<Menu.Separator />
						<Menu.ItemGroup>
							<Menu.ItemGroupLabel>Appearance</Menu.ItemGroupLabel>
							<Menu.Separator />

							<Menu.Item value="theme">
								<Menu.ItemText>Change Theme</Menu.ItemText>
							</Menu.Item>
							<Menu.Item value="zoom">
								<Menu.ItemText>Zoom</Menu.ItemText>
							</Menu.Item>
						</Menu.ItemGroup>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

svelte

<script lang="ts">
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.Trigger class="btn preset-filled">View Options</Menu.Trigger>
	<Portal>
		<Menu.Positioner>
			<Menu.Content>
				<Menu.ItemGroup>
					<Menu.ItemGroupLabel>View</Menu.ItemGroupLabel>
					<Menu.Item value="split">
						<Menu.ItemText>Split View</Menu.ItemText>
					</Menu.Item>
					<Menu.Item value="fullscreen">
						<Menu.ItemText>Fullscreen</Menu.ItemText>
					</Menu.Item>
				</Menu.ItemGroup>
				<Menu.Separator />
				<Menu.ItemGroup>
					<Menu.ItemGroupLabel>Appearance</Menu.ItemGroupLabel>
					<Menu.Item value="theme">
						<Menu.ItemText>Change Theme</Menu.ItemText>
					</Menu.Item>
					<Menu.Item value="zoom">
						<Menu.ItemText>Zoom</Menu.ItemText>
					</Menu.Item>
				</Menu.ItemGroup>
			</Menu.Content>
		</Menu.Positioner>
	</Portal>
</Menu>

Use ContextTrigger instead of Trigger to open the menu on right-click.

tsx

import { Menu, Portal } from '@skeletonlabs/skeleton-react';

export default function Context() {
	return (
		<Menu>
			<Menu.ContextTrigger className="card border border-dashed border-surface-200-800 p-8">Right-click here</Menu.ContextTrigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu.Item value="cut">
							<Menu.ItemText>Cut</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="copy">
							<Menu.ItemText>Copy</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="paste">
							<Menu.ItemText>Paste</Menu.ItemText>
						</Menu.Item>
						<Menu.Separator />
						<Menu.Item value="delete">
							<Menu.ItemText>Delete</Menu.ItemText>
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

svelte

<script lang="ts">
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.ContextTrigger class="card border border-dashed border-surface-200-800 p-8">Right-click here</Menu.ContextTrigger>
	<Portal>
		<Menu.Positioner>
			<Menu.Content>
				<Menu.Item value="cut">
					<Menu.ItemText>Cut</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="copy">
					<Menu.ItemText>Copy</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="paste">
					<Menu.ItemText>Paste</Menu.ItemText>
				</Menu.Item>
				<Menu.Separator />
				<Menu.Item value="delete">
					<Menu.ItemText>Delete</Menu.ItemText>
				</Menu.Item>
			</Menu.Content>
		</Menu.Positioner>
	</Portal>
</Menu>

Use the TriggerItem component to create nested menus within a parent menu.

tsx

import { Menu, Portal } from '@skeletonlabs/skeleton-react';
import { ChevronRightIcon } from 'lucide-react';

export default function Nested() {
	return (
		<Menu>
			<Menu.Trigger className="btn preset-filled">Open Menu</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						<Menu>
							<Menu.TriggerItem value="new">
								<Menu.ItemText>New</Menu.ItemText>
								<Menu.ItemIndicator>
									<ChevronRightIcon className="size-4" />
								</Menu.ItemIndicator>
							</Menu.TriggerItem>
							<Portal>
								<Menu.Positioner>
									<Menu.Content>
										<Menu.Item value="project">
											<Menu.ItemText>New Project</Menu.ItemText>
										</Menu.Item>
										<Menu.Item value="file">
											<Menu.ItemText>New File</Menu.ItemText>
										</Menu.Item>
										<Menu.Item value="folder">
											<Menu.ItemText>New Folder</Menu.ItemText>
										</Menu.Item>
									</Menu.Content>
								</Menu.Positioner>
							</Portal>
						</Menu>
						<Menu.Item value="open">
							<Menu.ItemText>Open File</Menu.ItemText>
						</Menu.Item>
						<Menu.Separator />
						<Menu.Item value="save">
							<Menu.ItemText>Save</Menu.ItemText>
						</Menu.Item>
						<Menu.Item value="export">
							<Menu.ItemText>Export</Menu.ItemText>
						</Menu.Item>
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

svelte

<script lang="ts">
	import { ChevronRightIcon } from '@lucide/svelte';
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.Trigger class="btn preset-filled">Open Menu</Menu.Trigger>
	<Portal>
		<Menu.Positioner>
			<Menu.Content>
				<Menu>
					<Menu.TriggerItem value="new">
						<Menu.ItemText>New</Menu.ItemText>
						<Menu.ItemIndicator>
							<ChevronRightIcon class="size-4" />
						</Menu.ItemIndicator>
					</Menu.TriggerItem>
					<Portal>
						<Menu.Positioner>
							<Menu.Content>
								<Menu.Item value="project">
									<Menu.ItemText>New Project</Menu.ItemText>
								</Menu.Item>
								<Menu.Item value="file">
									<Menu.ItemText>New File</Menu.ItemText>
								</Menu.Item>
								<Menu.Item value="folder">
									<Menu.ItemText>New Folder</Menu.ItemText>
								</Menu.Item>
							</Menu.Content>
						</Menu.Positioner>
					</Portal>
				</Menu>
				<Menu.Item value="open">
					<Menu.ItemText>Open File</Menu.ItemText>
				</Menu.Item>
				<Menu.Separator />
				<Menu.Item value="save">
					<Menu.ItemText>Save</Menu.ItemText>
				</Menu.Item>
				<Menu.Item value="export">
					<Menu.ItemText>Export</Menu.ItemText>
				</Menu.Item>
			</Menu.Content>
		</Menu.Positioner>
	</Portal>
</Menu>

Option Items

Use OptionItem to create menu items that can be toggled on or off with checkbox or radio group like behavior.

tsx

import { Menu, Portal } from '@skeletonlabs/skeleton-react';
import { CheckIcon } from 'lucide-react';
import { useState } from 'react';

export default function Option() {
	const sortOptions = [
		{ value: 'newest', label: 'Newest' },
		{ value: 'popular', label: 'Most Popular' },
		{ value: 'rating', label: 'Highest Rated' },
	];

	const filterOptions = [
		{ value: 'free-shipping', label: 'Free Shipping' },
		{ value: 'in-stock', label: 'In Stock' },
		{ value: 'on-sale', label: 'On Sale' },
	];

	const [sort, setSort] = useState('newest');
	const [filters, setFilters] = useState<string[]>(['free-shipping', 'in-stock']);

	return (
		<Menu closeOnSelect={false}>
			<Menu.Trigger className="btn preset-filled">Open Menu</Menu.Trigger>
			<Portal>
				<Menu.Positioner>
					<Menu.Content>
						{sortOptions.map((item) => (
							<Menu.OptionItem
								key={item.value}
								type="radio"
								checked={sort === item.value}
								onCheckedChange={(checked) => setSort(checked ? item.value : '')}
								value={item.value}
							>
								<Menu.ItemText>{item.label}</Menu.ItemText>
								<Menu.ItemIndicator className="hidden data-[state=checked]:block">
									<CheckIcon className="size-4" />
								</Menu.ItemIndicator>
							</Menu.OptionItem>
						))}
						<Menu.Separator />
						{filterOptions.map((item) => (
							<Menu.OptionItem
								key={item.value}
								type="checkbox"
								checked={filters.includes(item.value)}
								onCheckedChange={(checked) =>
									setFilters((prev) => (checked ? [...prev, item.value] : prev.filter((x) => x !== item.value)))
								}
								value={item.value}
							>
								<Menu.ItemText>{item.label}</Menu.ItemText>
								<Menu.ItemIndicator className="hidden data-[state=checked]:block">
									<CheckIcon className="size-4" />
								</Menu.ItemIndicator>
							</Menu.OptionItem>
						))}
					</Menu.Content>
				</Menu.Positioner>
			</Portal>
		</Menu>
	);
}

svelte

<script lang="ts">
	import { CheckIcon } from '@lucide/svelte';
	import { Menu, Portal } from '@skeletonlabs/skeleton-svelte';

	const sortOptions = [
		{ value: 'newest', label: 'Newest' },
		{ value: 'popular', label: 'Most Popular' },
		{ value: 'rating', label: 'Highest Rated' },
	];

	const filterOptions = [
		{ value: 'free-shipping', label: 'Free Shipping' },
		{ value: 'in-stock', label: 'In Stock' },
		{ value: 'on-sale', label: 'On Sale' },
	];

	let sort = $state('newest');
	let filters = $state<string[]>(['free-shipping', 'in-stock']);
</script>

<Menu closeOnSelect={false}>
	<Menu.Trigger class="btn preset-filled">Open Menu</Menu.Trigger>
	<Portal>
		<Menu.Positioner>
			<Menu.Content>
				{#each sortOptions as item (item)}
					<Menu.OptionItem
						type="radio"
						checked={sort === item.value}
						onCheckedChange={(checked) => (sort = checked ? item.value : '')}
						value={item.value}
					>
						<Menu.ItemText>{item.label}</Menu.ItemText>
						<Menu.ItemIndicator class="hidden data-[state=checked]:block">
							<CheckIcon class="size-4" />
						</Menu.ItemIndicator>
					</Menu.OptionItem>
				{/each}
				<Menu.Separator />
				{#each filterOptions as item (item)}
					<Menu.OptionItem
						type="checkbox"
						checked={filters.includes(item.value)}
						onCheckedChange={(checked) => (filters = checked ? [...filters, item.value] : filters.filter((x) => x !== item.value))}
						value={item.value}
					>
						<Menu.ItemText>{item.label}</Menu.ItemText>
						<Menu.ItemIndicator class="hidden data-[state=checked]:block">
							<CheckIcon class="size-4" />
						</Menu.ItemIndicator>
					</Menu.OptionItem>
				{/each}
			</Menu.Content>
		</Menu.Positioner>
	</Portal>
</Menu>

Anatomy

Here’s an overview of how the Menu component is structured in code:

tsx

import { Menu } from '@skeletonlabs/skeleton-react';

export default function Anatomy() {
	return (
		<Menu>
			<Menu.Trigger>
				<Menu.Indicator />
			</Menu.Trigger>
			<Menu.ContextTrigger>
				<Menu.Indicator />
			</Menu.ContextTrigger>
			<Menu.Positioner>
				<Menu.Content>
					<Menu.ItemGroup>
						<Menu.ItemGroupLabel />
						<Menu.Item>
							<Menu.ItemIndicator />
							<Menu.ItemText />
						</Menu.Item>
						<Menu.OptionItem>
							<Menu.ItemIndicator />
							<Menu.ItemText />
						</Menu.OptionItem>
						<Menu.TriggerItem>
							<Menu.ItemIndicator />
							<Menu.ItemText />
						</Menu.TriggerItem>
					</Menu.ItemGroup>
					<Menu.Separator />
					<Menu.Arrow>
						<Menu.ArrowTip />
					</Menu.Arrow>
				</Menu.Content>
			</Menu.Positioner>
		</Menu>
	);
}

svelte

<script lang="ts">
	import { Menu } from '@skeletonlabs/skeleton-svelte';
</script>

<Menu>
	<Menu.Trigger>
		<Menu.Indicator />
	</Menu.Trigger>
	<Menu.ContextTrigger>
		<Menu.Indicator />
	</Menu.ContextTrigger>
	<Menu.Positioner>
		<Menu.Content>
			<Menu.ItemGroup>
				<Menu.ItemGroupLabel />
				<Menu.Item>
					<Menu.ItemIndicator />
					<Menu.ItemText />
				</Menu.Item>
				<Menu.OptionItem>
					<Menu.ItemIndicator />
					<Menu.ItemText />
				</Menu.OptionItem>
				<Menu.TriggerItem>
					<Menu.ItemIndicator />
					<Menu.ItemText />
				</Menu.TriggerItem>
			</Menu.ItemGroup>
			<Menu.Separator />
			<Menu.Arrow>
				<Menu.ArrowTip />
			</Menu.Arrow>
		</Menu.Content>
	</Menu.Positioner>
</Menu>

API Reference

Unable to load component information for svelte/menu

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Grouped Items

Context Menu

Nested Menu

Option Items

Anatomy

API Reference