Menu Component - Rohit UI

Import

import { Menu } from 'rohit-ui';

Examples

Basic Menu

File

Edit

View

// Basic menu
<Menu items={[
  { label: "New", onClick: () => console.log("New clicked") },
  { label: "Open", onClick: () => console.log("Open clicked") },
  { label: "Save", onClick: () => console.log("Save clicked") }
]} />

Menu with Icons

📁File

✂️Edit

👁️View

// Menu with icons
<Menu items={[
  { label: "File", icon: "📁" },
  { label: "Edit", icon: "✂️" },
  { label: "View", icon: "👁️" }
]} />

Menu with Submenu

File

New

Open

Edit

// Menu with submenu
<Menu items={[
  { 
    label: "File",
    items: [
      { label: "New", onClick: () => console.log("New clicked") },
      { label: "Open", onClick: () => console.log("Open clicked") }
    ]
  },
  { 
    label: "Edit",
    items: [
      { label: "Cut", onClick: () => console.log("Cut clicked") },
      { label: "Copy", onClick: () => console.log("Copy clicked") }
    ]
  }
]} />

Rohit Mode Menu

UNNECESSARILY COMPLICATED

// Rohit Mode menu
<Menu 
  items={[
    { label: "Dramatic Option 1", onClick: () => console.log("Drama 1!") },
    { label: "Dramatic Option 2", onClick: () => console.log("Drama 2!") }
  ]}
  rohitMode
/>

Note: In Rohit Mode, the menu will wiggle, change color, and sometimes randomly reorder its items.

Props

Name	Type	Default	Description
items	Array<{ label: string, icon?: string, submenu?: Array }>	[]	Menu items to display
onSelect	function	-	Function called when a menu item is selected
className	string	-	CSS class to apply to the menu
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

CSS Customization

You can customize the Menu component using styled-components:

import styled from 'styled-components';
import { Menu } from 'rohit-ui';

const CustomMenu = styled(Menu)`
  background: linear-gradient(to bottom, var(--win98-silver), white);
  border: 2px solid var(--win98-navy);
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  
  .menu-item {
    padding: 8px 16px;
    font-family: 'Comic Sans MS', sans-serif;
    
    &:hover {
      background: var(--win98-navy);
      color: white;
    }
  }
`;

function MyComponent() {
  return (
    <CustomMenu
      items={[
        { label: "Custom Item 1" },
        { label: "Custom Item 2" }
      ]}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Menu component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly reorder its items
Draw unnecessary attention to itself