Components
Loading preview...
Mobile Menu, Mobile Nav, Mobile Navbar, Mobile navigation, Modern Mobile Menu, Mobile Dock, Dock, Bottom Nav, Navigation, Menu
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/modern-mobile-menuimport React, { useState, useEffect } from 'react';
import { InteractiveMenu } from "@/components/ui/modern-mobile-menu";
import { Home, Briefcase, Calendar, Shield, Settings } from 'lucide-react';
const lucideDemoMenuItems: InteractiveMenuItem[] = [
{ label: 'home', icon: Home }, // Use the Lucide Home component
{ label: 'strategy', icon: Briefcase }, // Use a different Lucide icon for strategy
{ label: 'period', icon: Calendar }, // Use Calendar icon
{ label: 'security', icon: Shield }, // Use Shield icon
{ label: 'settings', icon: Settings }, // Use Lucide Settings icon
];
const customAccentColor = 'var(--chart-2)';
const Default = () => {
return <InteractiveMenu />;
};
const Customized = () => {
return <InteractiveMenu items={lucideDemoMenuItems} accentColor={customAccentColor} />;
};
export { Default, Customized };