A Dropdown Menu component is a UI element that allows users to select an option from a list that appears when the user clicks or hovers over a button or link. This component helps save space on the interface by displaying additional options only when needed. Dropdown menus are commonly used for navigation, settings, or forms, enabling users to choose from multiple choices in a clean and organized manner.

# Demo

# Menu Item Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
iconClassName	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
shortcutClassName	string	' '	You can customise by passing tailwind classes.
title	string	Required	You can pass title for menu item.
shortcut	string	' '	You can pass shortcut key for menu item.
icon	ReactNode	Required	You can pass icon for menu item.
separator	boolean	false	You can pass separator for menu item.
onClick	() => void		You can get callback when menu item clicked.

# Nested Menu Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
triggerClassName	string	' '	You can customise by passing tailwind classes.
size	MenuSize	MenuSize.MD	You can pass size of the menu.
trigger	string \| ReactNode	Required	You can pass trigger to menu.
children	string \| ReactNode	Required	You can pass menu content as children.

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
triggerClassName	string	' '	You can customise by passing tailwind classes.
title	string	' '	You can pass title for menu.
size	MenuSize	MenuSize.MD	You can pass size of the menu.
side	top \| bottom \| right \| left	bottom	You can pass side to menu.
align	start \| end \| center	end	You can pass align to menu.
trigger	string \| ReactNode	Required	You can pass trigger to menu.
children	string \| ReactNode	Required	You can pass menu content as children.

# Usage

import { NMenu,NMenuItem, MenuSize, NMenuNested, NButton } from 'nayan';
import { User } from 'lucide-react';

const Menu = () => {
  return (
    <NMenu align="start" title="My Account" size={MenuSize.LG} trigger={<NButton>Show Menu</NButton>}>
      <NMenuItem title="Profile" icon={User} shortcut="⌘P" />
      <NMenuNested trigger={<NMenuItem title="Share" icon={User} className="p-0" />}>
        <NMenuItem title="Facebook" icon={User} shortcut="⌘P" />
        <NMenuItem title="Twitter" icon={User} shortcut="⌘P" />
      </NMenuNested>
      <NMenuItem title="Settings" icon={User} shortcut="⌘P" separator={true} />
      <NMenuItem title="Logout" icon={User} shortcut="⌘P" />
    </NMenu>
  );
};

export default Menu;