New

BottomNav

Mobile bottom navigation bar with 5 items, active state with filled icon and colored dot, center FAB button elevated with plus icon.

Navigation & Layoutmobilebottom-navnavigationapp

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { useState } from 'react';
4import { Home, Search, Plus, MessageSquare, User } from 'lucide-react';
5import { Button } from '@/components/ui/button';
6import { Badge } from '@/components/ui/badge';
7
8export default function BottomNav() {
9  const [active, setActive] = useState('home');
10
11  const navItems = [
12    { id: 'home', icon: Home, label: 'Home' },
13    { id: 'search', icon: Search, label: 'Search' },
14    { id: 'messages', icon: MessageSquare, label: 'Messages', badge: 3 },
15    { id: 'profile', icon: User, label: 'Profile' },
16  ];
17
18  return (
19    <div className="flex items-end justify-center min-h-[300px] bg-gradient-to-b from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-950 p-4">
20      <div className="relative w-full max-w-md">
21        <div className="absolute -top-6 left-1/2 -translate-x-1/2">
22          <Button
23            size="lg"
24            className="w-14 h-14 rounded-full bg-blue-600 hover:bg-blue-700 shadow-lg shadow-blue-600/30 border-4 border-white dark:border-slate-900"
25          >
26            <Plus className="w-6 h-6" />
27          </Button>
28        </div>
29        <div className="flex items-center justify-around bg-white dark:bg-slate-900 rounded-t-2xl shadow-2xl border-t border-slate-200 dark:border-slate-800 px-2 py-3">
30          {navItems.map((item) => (
31            <button
32              key={item.id}
33              onClick={() => setActive(item.id)}
34              className="relative flex flex-col items-center gap-1 px-4 py-2 rounded-xl transition-all"
35            >
36              <div className="relative">
37                <item.icon
38                  className={`w-6 h-6 transition-all
39                    ${active === item.id 
40                      ? 'text-blue-600 fill-blue-600/20' 
41                      : 'text-slate-400'
42                    }`}
43                />
44                {active === item.id && (
45                  <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-blue-600 rounded-full" />
46                )}
47              </div>
48              <span
49                className={`text-xs font-medium transition-colors
50                  ${active === item.id ? 'text-blue-600' : 'text-slate-400'}
51                `}
52              >
53                {item.label}
54              </span>
55              {item.badge && (
56                <Badge className="absolute -top-1 -right-1 h-5 w-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
57                  {item.badge}
58                </Badge>
59              )}
60            </button>
61          ))}
62        </div>
63      </div>
64    </div>
65  );
66}