tessl/npm-rc-menu

React menu UI component library providing comprehensive menu components for interactive navigation systems

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Layout Components

Name: tessl/npm-rc-menu
Author: tessl

Layout components provide structure and organization within menus, including grouping related items and adding visual separators for improved menu hierarchy and readability.

Capabilities

MenuItemGroup Component

Groups related menu items under a common title, providing visual organization and semantic structure.

/**
 * Groups related menu items under a common title
 * @param props - Menu item group configuration props
 * @returns React component
 */
declare const MenuItemGroup: React.ForwardRefExoticComponent<MenuItemGroupProps & React.RefAttributes<HTMLLIElement>>;

interface MenuItemGroupProps {
  // Content
  title?: React.ReactNode;
  children?: React.ReactNode;
}

Usage Examples:

import Menu, { MenuItem, MenuItemGroup } from "rc-menu";

// Basic item group
<Menu>
  <MenuItemGroup title="Navigation">
    <MenuItem key="1">Home</MenuItem>
    <MenuItem key="2">About</MenuItem>
    <MenuItem key="3">Contact</MenuItem>
  </MenuItemGroup>
  <MenuItemGroup title="Account">
    <MenuItem key="4">Profile</MenuItem>
    <MenuItem key="5">Settings</MenuItem>
    <MenuItem key="6">Logout</MenuItem>
  </MenuItemGroup>
</Menu>

// Group with custom title styling
<MenuItemGroup 
  title={<span style={{ color: '#1890ff', fontWeight: 'bold' }}>Admin Tools</span>}
>
  <MenuItem key="admin1">User Management</MenuItem>
  <MenuItem key="admin2">System Settings</MenuItem>
</MenuItemGroup>

// Group with custom styling
<MenuItemGroup 
  title="Recent Files"
  className="recent-files-group"
  style={{ background: '#f5f5f5' }}
>
  <MenuItem key="file1">Document.pdf</MenuItem>
  <MenuItem key="file2">Spreadsheet.xlsx</MenuItem>
</MenuItemGroup>

Divider Component

Visual separator component for creating sections within menus.

/**
 * Visual separator for creating sections within menus
 * @param props - Divider configuration props
 * @returns React component
 */
declare const Divider: React.FunctionComponent<DividerProps>;

interface DividerProps {
  // Styling
  className?: string;
  style?: React.CSSProperties;
}

Usage Examples:

import Menu, { MenuItem, Divider } from "rc-menu";

// Basic divider usage
<Menu>
  <MenuItem key="1">Cut</MenuItem>
  <MenuItem key="2">Copy</MenuItem>
  <MenuItem key="3">Paste</MenuItem>
  <Divider />
  <MenuItem key="4">Delete</MenuItem>
  <MenuItem key="5">Select All</MenuItem>
</Menu>

// Custom styled divider
<Divider 
  style={{ 
    margin: '8px 0', 
    borderTop: '2px solid #1890ff' 
  }} 
/>

// Divider with custom class
<Divider className="custom-menu-divider" />

Combined Layout Patterns

Effective combinations of groups and dividers for complex menu structures.

Grouped Sections with Dividers:

<Menu>
  <MenuItemGroup title="File Operations">
    <MenuItem key="new">New File</MenuItem>
    <MenuItem key="open">Open File</MenuItem>
    <MenuItem key="save">Save File</MenuItem>
  </MenuItemGroup>
  
  <Divider />
  
  <MenuItemGroup title="Edit Operations">
    <MenuItem key="cut">Cut</MenuItem>
    <MenuItem key="copy">Copy</MenuItem>
    <MenuItem key="paste">Paste</MenuItem>
  </MenuItemGroup>
  
  <Divider />
  
  <MenuItemGroup title="View Options">
    <MenuItem key="zoom-in">Zoom In</MenuItem>
    <MenuItem key="zoom-out">Zoom Out</MenuItem>
    <MenuItem key="fullscreen">Fullscreen</MenuItem>
  </MenuItemGroup>
</Menu>

Mixed Content Organization:

<Menu>
  <MenuItem key="dashboard">Dashboard</MenuItem>
  <MenuItem key="analytics">Analytics</MenuItem>
  
  <Divider />
  
  <MenuItemGroup title="Content Management">
    <MenuItem key="posts">Posts</MenuItem>
    <MenuItem key="pages">Pages</MenuItem>
    <MenuItem key="media">Media</MenuItem>
  </MenuItemGroup>
  
  <Divider />
  
  <MenuItem key="settings">Settings</MenuItem>
  <MenuItem key="help">Help</MenuItem>
</Menu>

Nested Groups in SubMenus

Item groups can be used within SubMenus for hierarchical organization.

import { SubMenu, MenuItemGroup, MenuItem } from "rc-menu";

<Menu mode="vertical">
  <MenuItem key="home">Home</MenuItem>
  
  <SubMenu key="admin" title="Administration">
    <MenuItemGroup title="User Management">
      <MenuItem key="users">All Users</MenuItem>
      <MenuItem key="roles">User Roles</MenuItem>
      <MenuItem key="permissions">Permissions</MenuItem>
    </MenuItemGroup>
    
    <MenuItemGroup title="System">
      <MenuItem key="config">Configuration</MenuItem>
      <MenuItem key="logs">System Logs</MenuItem>
      <MenuItem key="backup">Backup</MenuItem>
    </MenuItemGroup>
  </SubMenu>
</Menu>

Accessibility and Semantic Structure

Layout components enhance menu accessibility and semantic meaning.

// Semantic grouping for screen readers
<Menu role="menu">
  <MenuItemGroup title="Primary Navigation" role="group">
    <MenuItem key="1" role="menuitem">Home</MenuItem>
    <MenuItem key="2" role="menuitem">Products</MenuItem>
    <MenuItem key="3" role="menuitem">Services</MenuItem>
  </MenuItemGroup>
  
  <Divider role="separator" />
  
  <MenuItemGroup title="Account Actions" role="group">
    <MenuItem key="4" role="menuitem">Login</MenuItem>
    <MenuItem key="5" role="menuitem">Register</MenuItem>
  </MenuItemGroup>
</Menu>

Dynamic Group Content

Create dynamic groups based on data or user state.

interface GroupData {
  title: string;
  items: Array<{ key: string; label: string; }>;
}

const menuGroups: GroupData[] = [
  {
    title: "Recently Used",
    items: [
      { key: "recent1", label: "Project A" },
      { key: "recent2", label: "Project B" },
    ]
  },
  {
    title: "All Projects",
    items: [
      { key: "proj1", label: "Project 1" },
      { key: "proj2", label: "Project 2" },
      { key: "proj3", label: "Project 3" },
    ]
  }
];

<Menu>
  {menuGroups.map((group, index) => (
    <React.Fragment key={group.title}>
      {index > 0 && <Divider />}
      <MenuItemGroup title={group.title}>
        {group.items.map(item => (
          <MenuItem key={item.key}>{item.label}</MenuItem>
        ))}
      </MenuItemGroup>
    </React.Fragment>
  ))}
</Menu>

Styling and Theming

Customize the appearance of layout components to match your design system.

// Custom group title styling
<MenuItemGroup 
  title={
    <div style={{ 
      display: 'flex', 
      alignItems: 'center', 
      fontSize: '12px',
      fontWeight: 600,
      color: '#666',
      textTransform: 'uppercase',
      letterSpacing: '0.5px'
    }}>
      <IconComponent style={{ marginRight: 8 }} />
      Group Title
    </div>
  }
>
  <MenuItem key="1">Item 1</MenuItem>
  <MenuItem key="2">Item 2</MenuItem>
</MenuItemGroup>

// Custom divider styling
<Divider 
  style={{ 
    height: '1px',
    background: 'linear-gradient(to right, transparent, #ddd, transparent)',
    margin: '12px 16px',
    border: 'none'
  }} 
/>

Install with Tessl CLI