Skip to main content

menuCss

Description​

Optional. Adds a custom CSS class to the Menu

Usage​

menuCss?: string;

Example​

<script>
    import { Menu } from "@svar-ui/svelte-menu";

    const options = [
        { id: "add", text: "Add" },
        { id: "delete", text: "Delete" }
    ];
</script>

<div>
    <Menu {options} menuCss={"custom-menu"}></Menu>
</div>

<style>
    :global(.wx-menu.custom-menu) {
        border: 2px solid #444;
        background-color: #f2f2f2;
    }

    :global(.wx-menu.custom-menu .wx-item) {
        background-color: #f2f2f2;
        color: #333;
        padding: 6px 12px;
    }

    :global(.wx-menu.custom-menu .wx-item:hover) {
        background-color: #ddd;
    }
</style>