Animated Menu Bar

A modern, responsive menu bar React component featuring animated icon expansion, active state highlighting, and smooth transitions. Supports both dark and light themes out of the box using Tailwind CSS. On mobile, tooltips appear on tap for accessible navigation. Designed for clean code, accessibility, and seamless integration into any Next.js or React project.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Menu Bar to your project and fits it to your theme.

import { MenuBar } from "@/components/ui/animated-menu-bar";
import React, { useState } from 'react'

const menuItems = [
  'dashboard',
  'notifications',
  'settings',
  'help',
  'security',
] as const;
type MenuItem = typeof menuItems[number];

export default function DemoOne() {
    const [active, setActive] = useState<MenuItem>('dashboard');
  return  <MenuBar active={active} onSelect={setActive} />;
}