Menu Dropdown
A flexible dropdown that accepts any trigger element and customizable menu actions.
Menu Dropdown
MenuDropdown is a versatile dropdown component that allows you to pass any trigger element (like div, Box, Button, etc.) and fully customize the dropdown menu.
How To Use
Import
You can now import this component anywhere you need to use it.
import { MenuDropdown } from '@/components/ui/hatch/smart-dropdown';Preview
Props
| Prop | Type | Default |
|---|---|---|
align? | "start" | "center" | "end" | "end" |
className? | string | - |
fileInputId? | string | "fileInput" |
includeDeviceUpload? | boolean | true |
menuItems? | MenuItem[] | [] |
triggerElement | React.ReactElement | - |
MenuItem Type
| Prop | Type | Default |
|---|---|---|
className? | string | - |
icon? | React.ReactNode | - |
action | () => void | - |
label | string | - |
✨ Features
- Accepts any valid React element as the trigger
- Pass your own actions and icons
- Optional built-in upload from device logic
- Accessible and extendable
- Easy to integrate with any UI
🧠 When to Use
Use MenuDropdown when:
- You need a flexible dropdown trigger
- You want a reusable menu component with pluggable actions
- You want to combine default and custom menu actions