A sleek and modern navigation bar with a unique "limelight" effect that follows the active tab. This component is designed to be both highly functional and visually appealing, providing a smooth and intuitive user experience. Part of the EaseMize UI library, it's incredibly easy to integrate into your projects and customize to fit your brand's aesthetic. The component is built with TypeScript and is fully typed for a better developer experience
import { LimelightNav, NavItem } from "@/components/ui/limelight-nav";
import { Home, Bookmark, PlusCircle, User, Settings } from 'lucide-react';
const customNavItems = [
{ id: 'home', icon: <Home />, label: 'Home', onClick: () => console.log('Home Clicked!') },
{ id: 'bookmark', icon: <Bookmark />, label: 'Bookmarks', onClick: () => console.log('Bookmark Clicked!') },
{ id: 'add', icon: <PlusCircle />, label: 'Add New', onClick: () => console.log('Add Clicked!') },
{ id: 'profile', icon: <User />, label: 'Profile', onClick: () => console.log('Profile Clicked!') },
{ id: 'settings', icon: <Settings />, label: 'Settings', onClick: () => console.log('Settings Clicked!') },
];
const Customized = () => {
return <LimelightNav className="bg-secondary dark:bg-card/50 dark:border-accent/50 rounded-xl" items={customNavItems} />;
};
export { Customized };
const Default = () => {
return <LimelightNav />;
};
export { Default };