Menu

Preview

Code

<script lang="ts">
	import { ChevronRightIcon } from '@lucide/svelte';
	import { Menu, MenuContent, MenuItem, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger } from 'lithesome';
	import Button from '$site/components/Button.svelte';
	import { Container } from '$site/index.js';

	interface Item {
		value: string;
		disabled?: boolean;
		onclick?: () => void;
		children?: Item[];
	}

	let items: Item[] = [
		{
			value: 'Edit'
		},
		{ value: 'Copy' },
		{ value: 'Delete', disabled: true },
		{
			value: 'Sent to...',
			children: [
				{
					value: 'Admin',
					children: [
						{
							value: 'John',
							onclick() {
								console.log('Sent to John');
							}
						},
						{
							value: 'Lachie',
							onclick() {
								console.log('Sent to Lachie');
							}
						}
					]
				},
				{
					value: 'Moderator',
					children: [
						{
							value: 'Nick',
							onclick() {
								console.log('Sent to Nick');
							}
						},
						{
							value: 'Zac',
							onclick() {
								console.log('Sent to Zac');
							}
						}
					]
				}
			]
		}
	];
</script>

{#snippet menuContents(data: typeof items)}
	{#each data as item}
		{#if item.children}
			<MenuSub
				name={item.value}
				disabled={item.disabled}
				floatingConfig={{ placement: 'right-start', offset: { mainAxis: 6 } }}
			>
				<MenuSubTrigger
					class={({ active, opened, disabled }) => [
						'flex w-full cursor-pointer items-center justify-between px-6 py-2 text-left',
						(active || opened) && 'bg-zinc-900 text-zinc-200',
						disabled && 'opacity-50'
					]}
				>
					{item.value}
					<ChevronRightIcon class="size-4" />
				</MenuSubTrigger>
				<MenuSubContent>
					{#snippet custom({ props, state })}
						{#if state.visible}
							<Container {...props} bodyClass="p-0 py-3" containerClass="w-[200px] z-10">
								{#if item.children}
									{@render menuContents(item.children)}
								{/if}
							</Container>
						{/if}
					{/snippet}
				</MenuSubContent>
			</MenuSub>
		{:else}
			<MenuItem
				class={({ active, disabled }) => [
					'block w-full cursor-pointer px-6 py-2 text-left',
					active && 'bg-zinc-900 text-zinc-200',
					disabled && 'opacity-50'
				]}
				disabled={item.disabled}
				onclick={item.onclick}
			>
				{item.value}
			</MenuItem>
		{/if}
	{/each}
{/snippet}

<Menu>
	<MenuTrigger>
		{#snippet custom({ props })}
			<Button variant="secondary" {...props}>Actions</Button>
		{/snippet}
	</MenuTrigger>
	<MenuContent>
		{#snippet custom({ props, state })}
			{#if state.visible}
				<Container {...props} bodyClass="p-0 py-3" containerClass="w-[200px]">
					{@render menuContents(items)}
				</Container>
			{/if}
		{/snippet}
	</MenuContent>
</Menu>

Basic Example

<script>
	import {
		Menu,
		MenuArrow,
		MenuContent,
		MenuItem,
		MenuSub,
		MenuSubContent,
		MenuSubTrigger,
		MenuTrigger
	} from 'lithesome';
</script>

<Menu>
	<MenuTrigger>Menu</MenuTrigger>
	<MenuContent>
		<MenuItem>Item 1</MenuItem>
		<MenuItem>Item 2</MenuItem>
		<MenuItem>Item 3</MenuItem>
		<MenuSub name="submenu">
			<MenuSubTrigger>Item 4</MenuSubTrigger>

			<MenuSubContent>
				<MenuItem>Item 4-1</MenuItem>
				<MenuItem>Item 4-2</MenuItem>
				<MenuItem>Item 4-4</MenuItem>
			</MenuSubContent>
		</MenuSub>
	</MenuContent>
</Menu>

Disabling an item

By passing the disabled prop on the <MenuItem /> component. Lithesome will disallow clicking and skip over via keyboard navigation of that item.

<Menu>
	<MenuTrigger>Menu</MenuTrigger>
	<MenuContent>
		<MenuItem />
		<MenuItem disabled />
		<MenuItem />
	</MenuContent>
</Menu>

Each <MenuItem /> exposes a href prop. This will automatically turn the button into an anchor tag and place said href onto that item.

<Menu>
	<MenuTrigger>Menu</MenuTrigger>
	<MenuContent>
		<MenuItem href="/settings" />
		<MenuItem disabled />
		<MenuItem />
	</MenuContent>
</Menu>

Sub Menus

To keep your menus organized, you can group related items together using the <MenuSub /> component and its related elements.

<Menu>
	<MenuTrigger>Menu</MenuTrigger>
	<MenuContent>
		<MenuItem />
		<MenuSub name="sub">
			<MenuSubTrigger>Sub Trigger</MenuSubTrigger>
			<MenuSubContent>
				<MenuItem />
				<MenuItem />
			</MenuSubContent>
		</MenuSub>
		<MenuItem />
	</MenuContent>
</Menu>

Whenever we want a sub menu, place it in the position to where you would want the new sub menu trigger to be.

The <MenuSub /> component must have a name prop with a unique ID.

Just like disabling an item, passing the disabled prop to the <MenuSub /> component will disable the <MenuSubTrigger /> and the following contents.

<Menu>
	<MenuTrigger>Menu</MenuTrigger>
	<MenuContent>
		<MenuItem />
		<MenuSub name="sub" disabled>
			<MenuSubTrigger>Sub Trigger</MenuSubTrigger>
			<MenuSubContent>
				<MenuItem />
				<MenuItem />
			</MenuSubContent>
		</MenuSub>
		<MenuItem />
	</MenuContent>
</Menu>

Deeply nested sub menus

The <MenuSub /> components can be place inside of one another to achieve a deeply nested menu.

<Menu>
	<MenuTrigger>Menu</MenuTrigger>
	<MenuContent>
		<MenuItem />
		<MenuSub name="sub">
			<MenuSubTrigger>Sub Trigger</MenuSubTrigger>
			<MenuSubContent>
				<MenuItem />
				<MenuSub name="anotherone">
					<MenuSubTrigger>Sub Trigger</MenuSubTrigger>
					<MenuSubContent>
						<MenuItem />
						<MenuItem />
					</MenuSubContent>
				</MenuSub>
				<MenuItem />
			</MenuSubContent>
		</MenuSub>
		<MenuItem />
	</MenuContent>
</Menu>

Lithesome

Basic Example

Disabling an item

Site navigation

Sub Menus

Disabling a sub menu

Deeply nested sub menus