Animated Menu

A beautiful, animated menu component with smooth transitions, content switching, and modern design patterns. Perfect for navigation, settings panels, or any interactive menu system.

Features

• Smooth Transitions: Fluid animations between menu states
• Content Switching: Dynamic content based on selected menu item
• Hover Effects: Interactive hover states with visual feedback
• Accessible: Full keyboard navigation and screen reader support
• Responsive: Adapts beautifully to all screen sizes
• Customizable: Easy to modify colors, animations, and content

Installation

npm install motion/react @tabler/icons-react

Basic Usage

import { AnimatedMenu } from "@/components/snippets/menu/Demo";

const tabs = [
  {
    id: 1,
    label: "Home",
    icon: <IconHome className="h-4 w-4" />,
    content: <div>Home</div>,
  },
  {
    id: 2,
    label: "Projects",
    icon: <IconDeviceLaptop className="h-4 w-4" />,
    content: <div>Projects</div>,
  },
  {
    id: 3,
    label: "About",
    icon: <IconUser className="h-4 w-4" />,
    content: <div>About</div>,
  },
  {
    id: 4,
    label: "Contact",
    icon: <IconMail className="h-4 w-4" />,
    content: <div>Contact</div>,
  },
];

<AnimatedMenu tabs={tabs} />;

Props

Examples

Basic Animated Menu

<AnimatedMenu tabs={tabs} />

Custom Styled Menu

<AnimatedMenu
  tabs={tabs}
  className="bg-gradient-to-r from-purple-500 to-pink-500"
/>

Best Practices

1. Clear Labels: Use descriptive and concise menu labels
2. Consistent Icons: Use consistent icon styles throughout
3. Logical Grouping: Group related menu items together
4. Keyboard Navigation: Ensure all items are accessible via keyboard
5. Loading States: Show loading indicators for dynamic content

Accessibility

• ARIA Labels: Proper labels for screen readers
• Keyboard Navigation: Full keyboard support with arrow keys
• Focus Management: Clear focus indicators and management
• Semantic HTML: Proper HTML structure for accessibility

Performance Tips

1. Lazy Loading: Load content only when menu items are selected
2. Animation Optimization: Use will-change CSS property for better performance
3. Memoization: Memoize menu items to prevent unnecessary re-renders
4. Debouncing: Debounce rapid menu changes to improve performance