Sprix logo

Dropdown Menu

A compact action menu anchored to a button.

The Dropdown Menu Component

Basic Usage

Code Snippet

<script lang="ts">		import { Button, DropdownMenu } from '$lib/components';	</script> 	<DropdownMenu role="secondary" variant="outline">		{#snippet trigger()}Workspace actions{/snippet} 		<div class="flex min-w-56 flex-col gap-1 p-1">			<Button role="secondary" variant="quiet" class="justify-start">Rename workspace</Button>			<Button role="secondary" variant="quiet" class="justify-start">Manage members</Button>		</div>	</DropdownMenu>

Examples

Aligned End

Shift the menu alignment when it sits near the right edge of the layout.