Dropdown Menu

Name: Nayan UI
Author: Nayan UI

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

Usage

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
size	MenuSize	Optional	Size of the menu.
title	React.ReactNode	Optional	Title for the menu.
side	'top' \| 'bottom' \| 'right' \| 'left'	Optional	Side where menu appears.
align	'start' \| 'end' \| 'center'	Optional	Alignment of the menu.
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.

Dropdown Menu

Demo

Usage

Attributes

Tags