import { NMenu,NMenuItem, MenuSize, NMenuNested, NButton } from '@nayan-ui/react';
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;

Attributes

Name	Type	Default	Details
trigger	React.ReactNode	Required	Trigger element for the menu.
children	React.ReactNode	Optional	Menu content (NMenuItem, NSubMenu items).
title	string	Optional	Title label shown at the top of the menu.
width	number	220	Width of the menu content.
className	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise title by passing tailwind classes.

Dropdown Menu

Demo

Demo Coming Soon

Usage

Attributes

Tags