Dropdown

The Dropdown is a toggled by click layout for any toggler element & content.

If you are opening Dropdown outside component you need |stopPropagation modifier

<script>
    import { Button, Dropdown, Menu } from 'svelte-spectre'

    let active = false
</script>

<Dropdown bind:active>
    <Button on:click={() => active = !active}>
        Dropdown <Icon icon="caret"/>
    </Button>
    <Menu slot="content" items={menu} nav /> // or any content
</Dropdown>

<Button on:click|stopPropagation={() => active = !active}>
    Outside open Dropdown
</Button>