Components
Loading preview...
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.
@itsankitverma
npx shadcn@latest add https://21st.dev/r/itsankitverma/animated-menu-barimport { 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} />;
}