Skip to Content
Dashflow Logo

NavigationMenu Component

A comprehensive guide to using the NavigationMenu component with examples, props, and best practices.

Overview

The NavigationMenu component provides a flexible navigation interface with dropdown menus and links. It's designed for complex navigation structures with multiple levels and rich content.

Basic Usage

import { NavigationMenu } from '@dashflowx/core'


export default function NavigationMenuExample() {
  return (
    <NavigationMenu 
      backgroundColor="white"
      variant="minimal"
      theme="light"
    />
  )
}

Preview:

Examples

Basic Navigation Menu

import { NavigationMenu } from '@dashflowx/core'


export default function BasicNavigationMenu() {
  return (
    <NavigationMenu 
      backgroundColor="white"
      variant="minimal"
      theme="light"
    />
  )
}

Preview:

All Background Color Variants

import { NavigationMenu } from '@dashflowx/core'


const colorVariants = [
  { name: 'White', backgroundColor: 'white' },
  { name: 'Gray', backgroundColor: 'gray', backgroundIntensity: '200' },
  { name: 'Blue', backgroundColor: 'blue', backgroundIntensity: '500' },
  { name: 'Green', backgroundColor: 'green', backgroundIntensity: '500' },
  { name: 'Purple', backgroundColor: 'purple', backgroundIntensity: '500' },
  { name: 'Gradient Blue', backgroundColor: 'gradient-blue' },
  { name: 'Gradient Purple', backgroundColor: 'gradient-purple' },
  { name: 'Gradient Rainbow', backgroundColor: 'gradient-rainbow' },
  { name: 'Glass Effect', backgroundColor: 'glass' },
];


export default function AllBackgroundColorVariants() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {colorVariants.map((variant) => (
        <NavigationMenu 
          key={variant.name}
          backgroundColor={variant.backgroundColor}
          backgroundIntensity={variant.backgroundIntensity}
          variant="default"
          theme={variant.backgroundColor === 'glass' ? 'dark' : 'light'}
        />
      ))}
    </div>
  )
}

Preview:

All Variant Types

import { NavigationMenu } from '@dashflowx/core'


const variants = [
  { name: 'Default', variant: 'default' },
  { name: 'Minimal', variant: 'minimal' },
  { name: 'Bold', variant: 'bold' },
];


export default function AllVariantTypes() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {variants.map((variant) => (
        <NavigationMenu 
          key={variant.name}
          variant={variant.variant}
          backgroundColor="white"
          theme="light"
        />
      ))}
    </div>
  )
}

Preview:

All Theme Types

import { NavigationMenu } from '@dashflowx/core'


const themes = [
  { name: 'Light Theme', theme: 'light', backgroundColor: 'white' },
  { name: 'Dark Theme', theme: 'dark', backgroundColor: 'gray', backgroundIntensity: '800' },
  { name: 'Primary Theme', theme: 'primary', backgroundColor: 'blue', backgroundIntensity: '500' },
];


export default function AllThemeTypes() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {themes.map((theme) => (
        <NavigationMenu 
          key={theme.name}
          theme={theme.theme}
          backgroundColor={theme.backgroundColor}
          backgroundIntensity={theme.backgroundIntensity}
          variant="default"
        />
      ))}
    </div>
  )
}

Preview:

Hover Effects Examples

import { NavigationMenu } from '@dashflowx/core'


const hoverVariants = [
  { name: 'Gray Hover', hoverBackgroundColor: 'gray', hoverBackgroundIntensity: '100' },
  { name: 'Blue Hover', hoverBackgroundColor: 'blue', hoverBackgroundIntensity: '100' },
  { name: 'Green Hover', hoverBackgroundColor: 'green', hoverBackgroundIntensity: '100' },
  { name: 'Purple Hover', hoverBackgroundColor: 'purple', hoverBackgroundIntensity: '100' },
  { name: 'Accent Hover', hoverBackgroundColor: 'accent' },
];


export default function HoverEffectsExamples() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {hoverVariants.map((variant) => (
        <NavigationMenu 
          key={variant.name}
          backgroundColor="white"
          hoverBackgroundColor={variant.hoverBackgroundColor}
          hoverBackgroundIntensity={variant.hoverBackgroundIntensity}
          variant="default"
          theme="light"
        />
      ))}
    </div>
  )
}

Preview:

Custom Background Colors

import { NavigationMenu } from '@dashflowx/core'


export default function CustomBackgroundColors() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      <NavigationMenu 
        customBgColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        theme="dark"
      />
      <NavigationMenu 
        customBgColor="#ff6b6b"
        theme="light"
      />
      <NavigationMenu 
        customBgColor="linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3)"
        theme="dark"
      />
    </div>
  )
}

Preview:

Complete Feature Showcase

import { NavigationMenu } from '@dashflowx/core'


export default function CompleteFeatureShowcase() {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
      {/* Premium Gradient with Custom Hover */}
      <NavigationMenu 
        backgroundColor="gradient-purple"
        customHoverBgColor="rgba(255, 255, 255, 0.2)"
        variant="bold"
        theme="light"
      />
      
      {/* Glass Effect with Accent Hover */}
      <NavigationMenu 
        backgroundColor="glass"
        hoverBackgroundColor="accent"
        variant="default"
        theme="dark"
      />
      
      {/* Minimal with Custom Background */}
      <NavigationMenu 
        customBgColor="linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)"
        hoverBackgroundColor="blue"
        hoverBackgroundIntensity="100"
        variant="minimal"
        theme="light"
        showIcons={false}
        showBadges={false}
      />
      
      {/* Rainbow with Bold Variant */}
      <NavigationMenu 
        backgroundColor="gradient-rainbow"
        hoverBackgroundColor="white"
        hoverBackgroundIntensity="200"
        variant="bold"
        theme="dark"
      />
    </div>
  )
}

Preview:

Common Use Cases

Website Navigation

const websiteNavigation = (
  <NavigationMenu />
);

Documentation Navigation

const docsNavigation = (
  <NavigationMenu />
);

Admin Panel Navigation

const adminNavigation = (
  <NavigationMenu />
);

E-commerce Navigation

const ecommerceNavigation = (
  <NavigationMenu />
);

Best Practices

Clear Navigation Structure

Organize navigation items logically.

// ✅ Good - Clear structure
<NavigationMenu />


// ❌ Avoid - Confusing structure
<div>Random links</div>

Consistent Styling

Maintain consistent styling across your application.

// ✅ Good - Consistent styling
<NavigationMenu className="standard-nav-style" />


// ❌ Avoid - Inconsistent styling
<NavigationMenu className="random-styles" />

Accessible Navigation

Ensure navigation is accessible to all users.

// ✅ Good - Accessible
<NavigationMenu />


// ❌ Avoid - Not accessible
<div>Links without proper structure</div>

Responsive Design

Make navigation responsive for different screen sizes.

// ✅ Good - Responsive
<NavigationMenu className="flex flex-wrap justify-center" />


// ❌ Avoid - Fixed width
<NavigationMenu className="w-96" />

Use proper link structure for navigation.

// ✅ Good - Proper structure
<NavigationMenu />


// ❌ Avoid - Improper structure
<div>Links without proper href</div>

Customization

Custom Styling

You can customize the navigation menu appearance using CSS classes:

<NavigationMenu className="border border-gray-300 rounded-lg p-4" />

Background Colors

Use different background colors for different contexts:

// White background
<NavigationMenu backgroundColor="white" />


// Gray background with intensity
<NavigationMenu backgroundColor="gray" backgroundIntensity="800" />


// Gradient backgrounds
<NavigationMenu backgroundColor="gradient-blue" />
<NavigationMenu backgroundColor="gradient-purple" />
<NavigationMenu backgroundColor="gradient-rainbow" />


// Glass effect
<NavigationMenu backgroundColor="glass" />


// Custom background
<NavigationMenu customBgColor="linear-gradient(135deg, #667eea 0%, #764ba2 100%)" />

Themes

Use different themes for different contexts:

// Light theme
<NavigationMenu theme="light" />


// Dark theme
<NavigationMenu theme="dark" />


// Primary theme
<NavigationMenu theme="primary" />

Variants

Use different variants for different emphasis levels:

// Default variant
<NavigationMenu variant="default" />


// Minimal variant
<NavigationMenu variant="minimal" />


// Bold variant
<NavigationMenu variant="bold" />

Size Variations

Use different sizes for different emphasis levels:

// Small navigation
<NavigationMenu className="text-sm" />


// Standard navigation
<NavigationMenu className="text-base" />


// Large navigation
<NavigationMenu className="text-lg" />

Advanced Usage

Dynamic Navigation

Create dynamic navigation based on data:

const [navigationItems, setNavigationItems] = useState([]);


useEffect(() => {
  // Load navigation items based on user permissions
  loadNavigationItems().then(setNavigationItems);
}, []);

Conditional Navigation

Show/hide navigation items based on conditions:

const getNavigationItems = (userRole) => {
  const baseItems = [
    { title: 'Home', href: '/' }
  ];
  
  if (userRole === 'admin') {
    baseItems.push({ title: 'Admin', href: '/admin' });
  }
  
  return baseItems;
};

Handle navigation state:

const [activeItem, setActiveItem] = useState('home');


const handleNavigation = (item) => {
  setActiveItem(item);
  navigate(item.href);
};
  • MenuList: For menu lists
  • Menubar: For menu bars
  • Breadcrumb: For breadcrumb navigation
  • Button: For navigation triggers
  • Link: For navigation links

Props Reference

PropTypeDefaultDescription
itemsNavigationMenuItemType[]defaultItemsArray of navigation menu items
classNamestring''Additional CSS classes
onItemClick(item: NavigationMenuItemType) => voidundefinedClick handler for menu items
showIconsbooleantrueShow/hide icons in menu items
showBadgesbooleantrueShow/hide badges in menu items
backgroundColorstring'white'Background color theme
backgroundIntensitystring'500'Background color intensity (50-900)
customBgColorstring''Custom CSS background color/gradient
hoverBackgroundColorstring'gray'Hover background color theme
hoverBackgroundIntensitystring'100'Hover background color intensity (50-900)
customHoverBgColorstring''Custom CSS hover background color/gradient
variantstring'minimal'Styling variant (default, minimal, bold)
themestring'light'Theme (light, dark, primary)

Background Colors

Available backgroundColor options:

  • Solid Colors: white, gray, blue, green, red, yellow, purple, indigo, pink, orange, teal, cyan, emerald, lime, amber, rose, violet, fuchsia, sky, slate, zinc, neutral, stone
  • Gradients: gradient-blue, gradient-green, gradient-purple, gradient-pink, gradient-orange, gradient-teal, gradient-cyan, gradient-indigo, gradient-violet, gradient-rose, gradient-emerald, gradient-lime, gradient-amber, gradient-sky, gradient-slate, gradient-zinc, gradient-neutral, gradient-stone, gradient-rainbow
  • Special: glass (glass effect with backdrop blur)

Background Intensity

Available backgroundIntensity options: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

Hover Background Colors

Available hoverBackgroundColor options:

  • Solid Colors: gray, blue, green, red, yellow, purple, indigo, pink, orange, teal, cyan, emerald, lime, amber, rose, violet, fuchsia, sky, slate, zinc, neutral, stone
  • Special: accent (uses theme accent color)

Hover Background Intensity

Available hoverBackgroundIntensity options: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

Variants

  • default: Standard padding and font size
  • minimal: Reduced padding and smaller font size
  • bold: Increased padding and larger font size

Themes

  • light: Light theme with dark text
  • dark: Dark theme with light text
  • primary: Primary brand color theme

API Reference

For the complete API reference and advanced usage patterns, see the NavigationMenu API documentation.

Edit this page on GitHub
previousMenu List