Menubar

A horizontal bar of dropdown menus, like a desktop app menu.

Installation

npx lily-svelte@latest add menubar

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the menubar source from the registry into `$lib/components/ui/menubar`.

Usage

<script lang="ts">
	import * as Menubar from '$lib/components/ui/menubar';
</script>
 
<Menubar.Root>
	<Menubar.Menu>
		<Menubar.Trigger>File</Menubar.Trigger>
		<Menubar.Content>
			<Menubar.Item>New Tab <Menubar.Shortcut>⌘T</Menubar.Shortcut></Menubar.Item>
			<Menubar.Separator />
			<Menubar.Item>Share</Menubar.Item>
		</Menubar.Content>
	</Menubar.Menu>
</Menubar.Root>

← Link Navigation Menu →