Dropdown Menu

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

Rendered live, with the same build of the library you install.

With shortcuts:

With icons and a submenu:

Disabled item:

Usage

Source

DropdownMenu.tsx

import { MenuSize, NMenu, NMenuItem, NMenuNested } from '@nayan-ui/react';
import { Copy, Download, FileText, Pencil, Share2, Trash2 } from 'lucide-react';

const TRIGGER =
  'inline-flex items-center rounded-lg border border-default bg-surface px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-default/50';

const Menu = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">With shortcuts:</h3>
      <div className="mb-5">
        <NMenu size={MenuSize.MD} title="Actions" triggerClassName={TRIGGER} trigger="Open Menu">
          <NMenuItem id="edit" title="Edit" shortcut="⌘E" onAction={() => console.log('Edit')} />
          <NMenuItem id="copy" title="Copy" shortcut="⌘C" onAction={() => console.log('Copy')} />
          <NMenuItem id="duplicate" title="Duplicate" shortcut="⇧⌘D" separator onAction={() => console.log('Duplicate')} />
          <NMenuItem id="delete" title="Delete" shortcut="⌫" onAction={() => console.log('Delete')} />
        </NMenu>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">With icons and a submenu:</h3>
      <div className="mb-5">
        <NMenu size={MenuSize.LG} title="Document" triggerClassName={TRIGGER} trigger="File">
          <NMenuItem id="rename" title="Rename" icon={Pencil} shortcut="F2" onAction={() => console.log('Rename')} />
          <NMenuItem id="duplicate-file" title="Duplicate" icon={Copy} shortcut="⌘D" onAction={() => console.log('Duplicate')} />
          <NMenuNested trigger="Export as" icon={<Download className="h-4 w-4 shrink-0" />}>
            <NMenuItem id="pdf" title="PDF" onAction={() => console.log('PDF')} />
            <NMenuItem id="markdown" title="Markdown" onAction={() => console.log('Markdown')} />
            <NMenuItem id="html" title="HTML" onAction={() => console.log('HTML')} />
          </NMenuNested>
          <NMenuItem id="share" title="Share" icon={Share2} shortcut="⌘⇧S" separator onAction={() => console.log('Share')} />
          <NMenuItem id="trash" title="Move to trash" icon={Trash2} onAction={() => console.log('Trash')} />
        </NMenu>
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Disabled item:</h3>
      <NMenu size={MenuSize.MD} triggerClassName={TRIGGER} trigger="More">
        <NMenuItem id="report" title="Open report" icon={FileText} onAction={() => console.log('Report')} />
        <NMenuItem id="unavailable" title="Not available yet" disabled onAction={() => console.log('Never fires')} />
      </NMenu>
    </div>
  );
};

export default Menu;

Attributes

8 props

Name	Type	Default	Details
size	MenuSize	Optional	Size of the menu.
title	React.ReactNode	Optional	Title for the menu.
placement	'top' \| 'bottom' \| 'right' \| 'left'	'bottom'	Side of the trigger the menu opens on.
className	string	' '	You can customise by passing tailwind classes.
triggerClassName	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
trigger	React.ReactNode	Required	Trigger element for the menu.
children	React.ReactNode	Required	Menu content.

NMenuItem attributes

11 props

Name	Type	Default	Details
title	React.ReactNode	Required	Title for the menu item.
shortcut	string	Optional	Keyboard shortcut to display.
icon	ElementType \| React.ReactNode	Optional	Icon for the menu item.
separator	boolean	false	Whether to show separator after item.
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.
disabled	boolean	false	Whether the menu item is disabled.
id	string	Optional	Item key, for selection and for React Aria collections.
onAction	() => void	Optional	Called when the item is chosen, by click or by keyboard.

NMenuNested attributes

5 props

Name	Type	Default	Details
trigger	React.ReactNode	Required	Label for the row that opens the submenu.
icon	React.ReactNode	Optional	Rendered before the label, like an item icon.
children	React.ReactNode	Required	Submenu content — usually NMenuItem elements.
className	string	' '	You can customise by passing tailwind classes.
triggerClassName	string	' '	You can customise by passing tailwind classes.