<script lang="ts">
	import { UserIcon, CogIcon, LogOutIcon, CreditCardIcon } from 'lucide-svelte';
	import { Menu, MenuContent, MenuItem, MenuTrigger } from 'lithesome';
	import { Button, cn } from '$site/index.js';
	import { scale } from 'svelte/transition';

	const menuitems = [
		{ label: 'My Profile', icon: UserIcon },
		{ label: 'Account Settings', icon: CogIcon },
		{ label: 'Payments', icon: CreditCardIcon, disabled: true },
		{ label: 'Logout', icon: LogOutIcon, danger: true }
	];
</script>

<Menu>
	<MenuTrigger>
		<Button variant="primary">Open Menu</Button>
	</MenuTrigger>
	<MenuContent
		transition={[scale, { start: 0.8, duration: 150 }]}
		class={cn(
			'w-[215px] origin-top translate-y-1 rounded-xl border p-2 shadow-xl backdrop-blur ',
			'border-neutral-300 bg-white shadow-neutral-200',
			'dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-[#111]'
		)}
		constrainViewport
	>
		{#each menuitems as { label, icon: Icon, danger, disabled }}
			<MenuItem
				{disabled}
				class={({ hovered }) =>
					cn(
						disabled ? 'text-black/40 dark:text-white/40' : '',
						hovered && !danger ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white' : '',
						danger ? 'text-red-400' : '',
						hovered && danger ? 'bg-red-500 text-black' : '',
						'flex w-full items-center gap-2 rounded-md px-3.5 py-2.5 text-sm font-semibold'
					)}
			>
				<Icon class="size-4" />
				{label}
				{#if disabled}
					<span
						class="rounded-md bg-teal-600/20 px-2 py-0.5 text-xs text-teal-300 dark:bg-teal-500/30 dark:text-teal-300"
						>Soon</span
					>
				{/if}
			</MenuItem>
		{/each}
	</MenuContent>
</Menu>

API Reference

Data attribute	Value	Description
`data-menu`	`''`	The base data attribute, can be used for styling.
`data-state`	`'opened' \| 'closed'`	Whether the content component is visible.

MenuTrigger

The component wrapper for the menu trigger.

This component is a child of Menu

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`	Whether the content component is visible.

Data attribute	Value	Description
`data-menutrigger`	`''`	The base data attribute, can be used for styling.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`

MenuContent

This component is a child of Menu

Prop	Type	Description
`placement`	`Placement` `Default: bottom`	The FloatingUI placement string.
`constrainViewport`	`boolean` `Default: false`	Keeps the content from ever growing outside of the viewport.
`sameWidth`	`boolean` `Default: false`	Makes the content the same width as the trigger.
`portalTarget`	`strng \| HTMLElement` `Default: 'body'`	The target position for the content to be mounted.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.

Child prop	Type	Description
`visible`	`boolean`	Whether the content component is visible.

Data attribute	Value	Description
`data-menucontent`	`''`	The base data attribute, can be used for styling.
`data-side`	`'top' \| 'right' \| 'bottom' \| 'left'`	The position of the content relative to the trigger.
`data-alignment`	`'start' \| 'center' \| 'end'`	The alignment of content relative to the trigger.

MenuArrow

This component is a child of MenuContent

Prop	Type	Description
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Data attribute	Value	Description
`data-menuarrow`	`''`	The base data attribute, can be used for styling.
`data-side`	`'top' \| 'right' \| 'bottom' \| 'left'`

MenuItem

This component is a child of MenuContent

Prop	Type	Description
`href`	`string \| undefined` `Default: undefined`	Switches the item to an anchor tag with the target href.
`disabled`	`boolean` `Default: false`	Disables the item. Disallowing clicking and navigation via mouse or keyboard.
`self`	`HTMLButtonElement \| HTMLAnchorElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Child prop	Type	Description
`hovered`	`boolean`	If the item is currently being hovered via mouse or keyboard navigation.

Data attribute	Value	Description
`data-menuitem`	`''`	The base data attribute, can be used for styling.
`data-hovered`	`true`	If the item is currently being hovered via mouse or keyboard navigation.

Event	Param & Return	Description
`onClick`	`(e: MouseEvent)` `void`
`onFocus`	`(e: FocusEvent)` `void`
`onMouseover`	`(e: MouseEvent)` `void`

Basic Example

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

<Menu>
	<MenuTrigger>
		<button></button>
	</MenuTrigger>
	<MenuContent>
		<MenuArrow />
		<MenuItem />
	</MenuContent>
</Menu>

Disabling an item

By passing the disabled prop, it will disable the item. Disallowing clicking and skipped over via keyboard navigation.

<MenuItem disabled>
	<!-- code here... -->
</MenuItem>

If you need to navigate to another page via the Content items. Simply pass the link via the href prop.

<MenuItem href="/@gibbu">
	<!-- code here... -->
</MenuItem>

Basic Example

Disabling an item

Site navigation