menuCss

Description

Optional. Adds a custom CSS class to the Menu

Usage

menuCss?: string;

Example

import { Menu } from "@svar-ui/react-menu";

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

export default function Example() {
  return (
    <div>
      <Menu options={options} menuCss={"custom-menu"} />
    </div>
  );
}

/* Apply custom styling to the Menu by targeting the menuCss class */
.wx-menu.custom-menu {
  border: 2px solid #444;
  background-color: #f2f2f2;
}

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

.wx-menu.custom-menu .wx-item:hover {
  background-color: #ddd;
}