Delta Components

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.

CenterButtonConfig

Configuration object for the center action button.

Route

Interface for route configuration objects.

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:

1export const routes: Route[] = [
2  {
3    href: "/dashboard",
4    label: "Dashboard",
5    icon: ChartBar,
6  },
7  {
8    href: "/projects",
9    label: "Projects",
10    icon: FolderOpen,
11  },
12  // ... more routes
13]

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:

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

Entrance Animation

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

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

Accessibility

Screen Reader Support

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

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.

1import { routes } from "@/routes"
2
3import BottomBar from "@/registry/layout/bottom-bar"
4
5export default function App() {
6  return (
7    <div className="min-h-screen">
8      {/* Your content */}
9      <BottomBar routes={routes} showLabels={false} />
10    </div>
11  )
12}

With Entrance Animation

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

1import { routes } from "@/routes"
2
3import BottomBar from "@/registry/layout/bottom-bar"
4
5export default function App() {
6  return (
7    <div className="min-h-screen">
8      {/* Your content */}
9      <BottomBar
10        routes={routes}
11        showLabels={true}
12        enableEntranceAnimation={true}
13      />
14    </div>
15  )
16}

Custom Background

Solid background color with custom styling and no top border.

1import { routes } from "@/routes"
2
3import BottomBar from "@/registry/layout/bottom-bar"
4
5export default function App() {
6  return (
7    <div className="min-h-screen">
8      {/* Your content */}
9      <BottomBar
10        routes={routes}
11        showLabels={true}
12        showBorderTop={false}
13        className="bg-slate-900 dark:bg-slate-800"
14      />
15    </div>
16  )
17}

Center Action Button

Enhanced navigation with prominent center action button for primary actions.

1import { routes } from "@/routes"
2
3import BottomBar from "@/registry/layout/bottom-bar"
4
5export default function App() {
6  const handleAddClick = () => {
7    console.log("Add button clicked")
8    // Handle your add action here
9  }
10
11  return (
12    <div className="min-h-screen">
13      {/* Your content */}
14      <BottomBar
15        routes={routes}
16        showLabels={true}
17        centerButton={{
18          onClick: handleAddClick,
19          label: "Add",
20        }}
21      />
22    </div>
23  )
24}