Menu

Menus are vertical list of links or buttons for actions and navigation.

Add a container element with the menu class. And add child elements with the menu-item class. You can separate menu items with a divider. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.

Menus also have Form controls (checkbox, radio and switch) support.

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

    const menu = [
            { divider: `TOP` },
            { text: `top_left`, active: true },
            { text: `top_center`, checkbox: true },
            { text: `top_right`, badge: 2 }
        ]
</script>

<Menu items={menu} bind:radiogroup>
    <Tile slot="header">
        <Avatar slot="icon">
            <img class="avatar" src="{base}/img/avatar-4.png" alt="Avatar" />
        </Avatar>
        <div slot="title" class="tile-content">Steve Rogers</div>
    </Tile>
    <Button slot="footer" block variant="primary">Footer</Button>
</Menu>