Bottom navigationmobile
App tab bar of three to five items with icon, label, badge count, safe-area padding and link rendering through render.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/bottom-navigationDefault
bottom-navigation-demo.tsx
import { CalendarIcon, HomeIcon, MessageCircleIcon, UserIcon } from "lucide-react";import { BottomNavigation, BottomNavigationItem } from "@/components/ui/bottom-navigation";
export default function BottomNavigationDemo() { return ( <BottomNavigation className="static max-w-sm"> <BottomNavigationItem icon={HomeIcon} label="Home" href="#home" active /> <BottomNavigationItem icon={CalendarIcon} label="Bookings" href="#bookings" /> <BottomNavigationItem icon={MessageCircleIcon} label="Messages" href="#messages" badge={120} /> <BottomNavigationItem icon={UserIcon} label="Profile" href="#profile" /> </BottomNavigation> );}