Menu

Preview

Code

<script lang="ts">
	import { ChevronRightIcon } from '@lucide/svelte';
	import { fly } from 'svelte/transition';
	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}
							<div transition:fly={{ x: -5, duration: 200 }} {...props}>
								<Container bodyClass="p-0 py-3" containerClass="w-[200px] z-10">
									{#if item.children}
										{@render menuContents(item.children)}
									{/if}
								</Container>
							</div>
						{/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}
				<div transition:fly={{ y: -5, duration: 200 }} {...props}>
					<Container bodyClass="p-0 py-3" containerClass="w-[200px]">
						{@render menuContents(items)}
					</Container>
				</div>
			{/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>

API Reference

Property	Type	Description
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`visible`	boolean	The current visibility of the contents.
`disabled`	boolean	Disables the entire component tree.
`portalTarget`	HTMLElement \| string	The DOM target to mount the content to.
`floatingConfig`	FloatingConfig	The underlying FloatingUI config.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<MenuTrigger />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<MenuContent />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<MenuArrow />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<MenuItem />

Property	Type	Description
`href`	string	Turns the item into an anchor tag with the provided `href` applied.
`disabled`	boolean	Disables the item, skipping mouse/keyboard navigation and stopping events from firing.
`closeOnClick`	boolean	Closes the item on click/keyboard press.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`disabled`	boolean	True if the item is disabled.
`active`	boolean	True if the item is being hovered.

<MenuSub />

Property	Type	Description
`name`	string	The unique ID of the sub menu. This ID must not change on renders. So using an autogenerated id will not work and cause the sub menus to fail.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`visible`	boolean	The current visibility of the contents.
`disabled`	boolean	Disables the entire component tree.
`portalTarget`	HTMLElement \| string	The DOM target to mount the content to.
`floatingConfig`	FloatingConfig	The underlying FloatingUI config.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<MenuSubTrigger />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`disabled`	boolean	True if the sub menu is disabled.
`active`	boolean	True if item is hovered.
`opened`	boolean	True if the sub menu is opened.

<MenuSubContent />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

Lithesome