Docs

Bottom Bar

A mobile-first navigation bar that sits at the bottom of the screen with support for custom routes, center action buttons, and smooth animations.

Mobile Only

This component only works on mobile and small screen devices. The effect is automatically disabled on desktop and large screen devices.

Demo

Code

Open in

Welcome Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Use the bottom navigation to explore different sections.

Search & Discovery

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.

This search section demonstrates organized content navigation.

About Us

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

The bottom bar highlights the current section automatically.

Your Favorites

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Save your favorite content and access it quickly here.

User Profile

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae.

Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.

Manage your profile settings and preferences here.

Overview

The Bottom Bar component provides a mobile-optimized navigation experience with customizable routes, optional center action buttons, and smooth animations. It automatically hides on desktop and shows route-based active states with scroll-to-top functionality.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/bottom-bar.json

API Reference

BottomBar

The main navigation component that renders the bottom bar.

Name	Type	Default	Description
`showLabels`	`boolean`	`false`	Whether to show text labels below icons
`centerButton`	`CenterButtonConfig`	-	Configuration for optional center action button
`showBorderTop`	`boolean`	`true`	Whether to show top border
`enableEntranceAnimation`	`boolean`	`false`	Whether to enable slide-up entrance animation

CenterButtonConfig

Configuration object for the center action button.

Name	Type	Default	Description
`onClick`	`() => void`	-	Callback function when button is clicked
`label`	`string`	-	Optional label for the button

Route

Interface for route configuration objects.

Name	Type	Description
`href`	`string`	The route path
`label`	`string`	Display label for the route
`icon`	`React.ForwardRefExoticComponent<IconProps>`	Phosphor icon component

Features

Mobile-First Design

The bottom bar automatically hides on desktop (md:hidden) and only appears on mobile devices where this navigation pattern is most effective.

Active State Management

Routes automatically show active states based on the current pathname, with visual feedback through filled icons and color changes.

Scroll to Top

Tapping on an already active route smoothly scrolls to the top of the page instead of navigating.

Smooth Animations

Interactive animations powered by Framer Motion provide feedback when tapping navigation items or the center button, including pulse effects, tap scaling, and smooth transitions. An optional entrance animation slides the bar up from the bottom when the component first loads.

Backdrop Blur

Modern backdrop blur effect with semi-transparent background for better visual hierarchy.

Customization

Route Configuration

Modify the routes.ts file to customize your navigation items:

export const routes: Route[] = [
  {
    href: "/dashboard",
    label: "Dashboard",
    icon: ChartBar,
  },
  {
    href: "/projects",
    label: "Projects",
    icon: FolderOpen,
  },
  // ... more routes
]

Styling

The component uses CSS classes that can be customized:

backdrop-blur - Backdrop blur effect
border-t border-border - Top border styling
bg-background/85 - Semi-transparent background
text-primary - Active state colors

Animation Timing

Modify the animation duration by updating the transition props in the component:

// Slower pulse animation
<motion.div
  animate={isActive ? { scale: [1, 1.1, 1] } : { scale: 1 }}
  transition={{ duration: 0.5, ease: "easeInOut" }} // Slower
>

Entrance Animation

Enable the slide-up entrance animation when the component first loads:

<BottomBar routes={routes} showLabels={true} enableEntranceAnimation={true} />

Accessibility

Proper ARIA labels for the center button
Semantic navigation structure
Focus management for keyboard navigation

Standard tab navigation support
Enter key activation for buttons
Focus indicators

Color Contrast

High contrast between active and inactive states
Supports both light and dark themes
Accessible text size (minimum 10px for labels)

Examples

Without Labels

Clean, icon-only navigation for minimal interfaces.

import { routes } from "@/routes"

import BottomBar from "@/registry/layout/bottom-bar"

export default function App() {
  return (
    <div className="min-h-screen">
      {/* Your content */}
      <BottomBar routes={routes} showLabels={false} />
    </div>
  )
}

With Entrance Animation

Bottom bar with slide-up entrance animation for enhanced user experience.

import { routes } from "@/routes"

import BottomBar from "@/registry/layout/bottom-bar"

export default function App() {
  return (
    <div className="min-h-screen">
      {/* Your content */}
      <BottomBar
        routes={routes}
        showLabels={true}
        enableEntranceAnimation={true}
      />
    </div>
  )
}

Custom Background

Solid background color with custom styling and no top border.

import { routes } from "@/routes"

import BottomBar from "@/registry/layout/bottom-bar"

export default function App() {
  return (
    <div className="min-h-screen">
      {/* Your content */}
      <BottomBar
        routes={routes}
        showLabels={true}
        showBorderTop={false}
        className="bg-slate-900 dark:bg-slate-800"
      />
    </div>
  )
}

Center Action Button

Enhanced navigation with prominent center action button for primary actions.

import { routes } from "@/routes"

import BottomBar from "@/registry/layout/bottom-bar"

export default function App() {
  const handleAddClick = () => {
    console.log("Add button clicked")
    // Handle your add action here
  }

  return (
    <div className="min-h-screen">
      {/* Your content */}
      <BottomBar
        routes={routes}
        showLabels={true}
        centerButton={{
          onClick: handleAddClick,
          label: "Add",
        }}
      />
    </div>
  )
}

Animate In

Checkbox Input