Skip to Content
Dashflow Logo

MenuList Component

A comprehensive guide to using the MenuList component with different variants, sizes, and configurations.

Overview

The MenuList component provides a flexible navigation menu with multiple variants and styling options. It's designed to display lists of menu items with support for active states, icons, and different visual styles.

Basic Usage

import { MenuList } from '@dashflowx/core';


export default function MenuListExample() {
  const menuItems = [
    { id: '1', title: 'Dashboard', path: '/dashboard', active: true },
    { id: '2', title: 'Analytics', path: '/analytics', active: false },
    { id: '3', title: 'Settings', path: '/settings', active: false }
  ];


  return (
    <MenuList 
      menuArrays={menuItems}
      variant="basic"
      library="next"
      type="a"
    />
  );
}

Preview:

Variants

Basic Variant

Simple list-style menu with clean design.

<MenuList 
  variant="basic"
  menuArrays={menuItems}
  showText={true}
  showIcon={true}
/>

Preview:

One Variant

Enhanced menu with better spacing and visual hierarchy.

<MenuList 
  variant="one"
  menuArrays={menuItems}
  showText={true}
  showIcon={true}
/>

Preview:

Two Variant

Card-style menu with header and structured layout.

<MenuList 
  variant="two"
  menuArrays={menuItems}
  showText={true}
  showIcon={true}
/>

Preview:

Props

PropTypeDefaultDescription
menuArraysMenuItem[]-Array of menu items to display
variant'basic' | 'one' | 'two''basic'Visual style variant of the menu
library'react' | 'next''next'Library type for link handling
typestring'a'Link element type
classNamestring''Additional CSS classes
showTextbooleantrueWhether to show menu item text
showIconbooleantrueWhether to show menu item icons
tooltipClassNamestring''CSS classes for tooltips
navClassNamestring''CSS classes for navigation wrapper
interface MenuItem {
  id: string;           // Unique identifier
  title: string;        // Display text
  path: string;         // Link path
  active: boolean;      // Active state
  menuIcon?: React.ReactNode; // Optional icon
}

Examples

const navigationItems = [
  { 
    id: '1', 
    title: 'Dashboard', 
    path: '/dashboard', 
    active: true,
    menuIcon: '🏠'
  },
  { 
    id: '2', 
    title: 'Analytics', 
    path: '/analytics', 
    active: false,
    menuIcon: '📊'
  },
  { 
    id: '3', 
    title: 'Settings', 
    path: '/settings', 
    active: false,
    menuIcon: '⚙️'
  }
];


<MenuList 
  variant="one"
  menuArrays={navigationItems}
  showIcon={true}
  showText={true}
/>

Preview:

Compact Menu

<MenuList 
  variant="basic"
  menuArrays={menuItems}
  showIcon={false}
  showText={true}
  className="text-sm"
/>

Preview:

Card Style Menu

<MenuList 
  variant="two"
  menuArrays={menuItems}
  showIcon={true}
  showText={true}
  className="w-64"
/>

Preview:

Customization

Custom Styling

<MenuList 
  variant="basic"
  menuArrays={menuItems}
  className="bg-gray-50 rounded-lg p-4"
  showIcon={true}
  showText={true}
/>

Different Libraries

// For React Router
<MenuList 
  library="react"
  type="Link"
  menuArrays={menuItems}
/>


// For Next.js
<MenuList 
  library="next"
  type="a"
  menuArrays={menuItems}
/>

Best Practices

Consistent Active States

Always ensure only one menu item has active: true at a time.

// ✅ Good - Single active item
const menuItems = [
  { id: '1', title: 'Home', path: '/', active: true },
  { id: '2', title: 'About', path: '/about', active: false },
  { id: '3', title: 'Contact', path: '/contact', active: false }
];


// ❌ Bad - Multiple active items
const menuItems = [
  { id: '1', title: 'Home', path: '/', active: true },
  { id: '2', title: 'About', path: '/about', active: true }, // Should be false
  { id: '3', title: 'Contact', path: '/contact', active: false }
];

Meaningful Icons

Use consistent and meaningful icons for better UX.

// ✅ Good - Consistent icon style
const menuItems = [
  { id: '1', title: 'Dashboard', path: '/dashboard', active: true, menuIcon: '🏠' },
  { id: '2', title: 'Analytics', path: '/analytics', active: false, menuIcon: '📊' },
  { id: '3', title: 'Settings', path: '/settings', active: false, menuIcon: '⚙️' }
];

Appropriate Variants

Choose variants based on your design needs.

// ✅ Good - Variant selection
<MenuList variant="basic" />   // For simple lists
<MenuList variant="one" />     // For enhanced navigation
<MenuList variant="two" />     // For card-style menus

Accessibility

The MenuList component includes accessibility features:

  • Semantic HTML: Uses proper <nav> and <ul> elements
  • Keyboard Navigation: Supports keyboard navigation
  • Screen Reader Support: Proper ARIA labels and roles
  • Focus Management: Clear focus indicators
  • Color Contrast: Meets WCAG guidelines

Performance Tips

  • Memoization: Use React.memo for large menu lists
  • Lazy Loading: Implement lazy loading for dynamic menu items
  • Icon Optimization: Use optimized icon components
  • CSS Classes: Leverage Tailwind CSS for consistent styling
  • NavigationMenu: For complex navigation structures
  • Menubar: For horizontal menu bars
  • Breadcrumb: For hierarchical navigation
  • Tabs: For tabbed navigation interfaces
Edit this page on GitHub
previousMenu Bar