Skip to main content

menuCss

Description​

Optional. Adds a custom CSS class to the Menu

Usage​

menuCss?: string;

Example​

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

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

<template>
  <div>
      <Menu :options="options" menuCss="custom-menu"></Menu>
  </div>
</template>

<style scoped>
    :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>