This is a simple resuable dropdown component. It comes with standard with styling and a clickOutside directive to dismiss the dropdown when clicked outside of the dropdown. You can easily change the text of the button and the content of the dropdown.

The component is made using the DaisyUI dropdown component: https://daisyui.com/components/dropdown

Change the dropdown-bottom class to dropdown-top, dropdown-left or dropdown-right to change the direction of the dropdown.

Add the class dropdown-end to align the dropdown content.

The clickOutside.ts script is used to dismiss the dropdown when clicked outside of the dropdown.

​
Usage

+page.svelte
<script lang="ts">
	import Dropdown from '$lib/ui/components/Dropdown.svelte';
</script>

<Dropdown class="dropdown-bottom">
    <div slot="button"><!-- Dropdown button text --></div>
    <div slot="content">
        <!-- Dropdown content -->
    </div>
</Dropdown>

Located at src/lib/ui/components/Dropdown.svelte.

You can customize it to your needs.

Modal