Shadcn.io is not affiliated with official shadcn/ui
Navbar Mobile Bottom
A mobile bottom tab bar navigation for React, Next.js, shadcn/ui, and Tailwind CSS. Features five icon tabs with labels for Home, Search, Create, Notifications, and Profile with active state indicators, filled icon variants, and safe area padding for mobile devices.
Add native-feeling mobile navigation with a bottom tab bar that mirrors iOS and Android patterns. Five icon tabs with labels provide clear wayfinding, while the active state uses filled icons and foreground color to instantly communicate the current location within your app.
Related Components
Mobile Drawer Navbar
Navbar with slide-out mobile menu
Auth Buttons Navbar
Navbar with sign in and sign up buttons
Minimal Navbar
Clean minimal navigation bar
User Menu Navbar
Dashboard navbar with user avatar dropdown
Centered Logo Navbar
Navbar with centered logo layout
Search Expandable Navbar
Navbar with expandable search input
FAQ
Was this page helpful?
Sign in to leave feedback.
Minimal
A clean minimal navigation bar built with React, Next.js, shadcn/ui, and Tailwind CSS. Features a logo, horizontal nav links with hover underline animations, and a single call-to-action button using framer-motion transitions.
Mobile Drawer
A navbar with animated hamburger menu and slide-out drawer for React, Next.js, shadcn/ui, and Tailwind CSS. Shows a clean desktop navigation that transforms into a mobile-friendly Sheet drawer with navigation links, call-to-action button, and social links on hamburger click.