@vbss-ui/dropdown-menu

A customizable and accessible Dropdown Menu component.

The Dropdown Menu component is a floating menu that appears when clicking on a trigger element. It provides a list of options or actions that users can select from. Built with accessibility in mind, it offers various styling options, positioning, and customization features.

Installation

To install only the Dropdown Menu component, run one of the following commands:

npm install @vbss-ui/dropdown-menu
# or
yarn add @vbss-ui/dropdown-menu

---

Usage

import { DropdownMenu } from "@vbss-ui/dropdown-menu"

export const App = () => {
  return (
    <DropdownMenu
      trigger={<button>Open Menu</button>}
      menus={[
        { item: "Option 1" },
        { item: "Option 2" },
        { item: "Option 3" }
      ]}
    />
  )
}

---

Examples

With Menu Label

import { DropdownMenu } from "@vbss-ui/dropdown-menu"

export const App = () => {
  return (
    <DropdownMenu
      trigger={<button>Open Menu</button>}
      menuLabel="Actions"
      menus={[
        { item: "Edit" },
        { item: "Delete" },
        { item: "Share" }
      ]}
    />
  )
}

With Custom Position

import { DropdownMenu } from "@vbss-ui/dropdown-menu"

export const App = () => {
  return (
    <DropdownMenu
      trigger={<button>Open Menu</button>}
      side="right"
      menus={[
        { item: "Option 1" },
        { item: "Option 2" },
        { item: "Option 3" }
      ]}
    />
  )
}

Custom Variant

import { DropdownMenu } from "@vbss-ui/dropdown-menu"

export const App = () => {
  return (
    <DropdownMenu
      trigger={<button>Open Menu</button>}
      variant="secondary"
      rounded="lg"
      menus={[
        { item: "Option 1" },
        { item: "Option 2" },
        { item: "Option 3" }
      ]}
    />
  )
}

---

Props

Prop	Type	Description	Default
variant	primary | secondary | outline | ghost	Defines the visual style of the Dropdown Menu.	primary
size	xs | sm | md | lg | xl	Sets the size of the Dropdown Menu.	md
rounded	none | sm | md | lg | full	Sets the border radius of the Dropdown Menu.	md
fontSize	xs | sm | md | lg | xl	Sets the font size of the menu items.	md
fontWeight	thin | light | normal | medium | bold | extrabold	Specifies the font weight of the menu items.	normal
side	top | right | bottom | left	Sets the position of the Dropdown Menu.	top
trigger	React.ReactNode	The element that triggers the Dropdown Menu.	-
menuLabel	React.ReactNode	Optional label for the menu.	-
menus	{ item: React.ReactNode | "separator" }[]	Array of menu items or separators.	[]
ref	React.Ref	Allows accessing the underlying DOM element.	-
className	string	Additional CSS classes for custom styling.	-
style	React.CSSProperties	Additional style for custom styling.	-

---

Customization

You can extend the default styles by passing custom styles using className or style.

<DropdownMenu
  trigger={<button>Open Menu</button>}
  style={{
    backgroundColor: "red"
  }}
  menus={[
    { item: "Option 1" },
    { item: "Option 2" }
  ]}
/>

Or you can use the default component classNames.

.customDropdownMenu {
  .dropdownMenuTrigger {
    background-color: red;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
  }
}

.dropdownMenu {
  background-color: red !important;

  .dropdownMenuLabel {
    background-color: blue;
  }
  .dropdownMenuSeparator {}
  .dropdownMenuItem {
    background-color: purple;
  }
}

import "./custom.css"

export const App = () => {
  return (
    <div className="customDropdownMenu">
      <DropdownMenu
        className="dropdownMenu"
        menuLabel="Actions"
        trigger={<button>Open Menu</button>}
        menus={[{ item: "Option 1" }, { item: "Option 2" }]}
      />
    </div>
  )
}

Customizing Colors (Optional)

If you want to customize the colors used in the vbss-ui components, you can create a custom CSS file with your desired color scheme. Create a .css file (e.g., custom-colors.css) and define your colors using HSL format as follows:

:root {
  --background: 0 0% 100%;
  --primary: 117 100% 47%;
  --secondary: 248 53% 58%;
}

After creating your custom colors file, import it into your main file:

import "./custom-colors.css";

This will override the default colors with your custom colors.

---

More

For more information, please visit the repository or check out the documentation at ui.vbss.io/dropdown-menu.

To see the components in action, run Storybook locally. Navigate to the repository directory and execute:

npm run storybook