"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface BottomNavBarItem {
  id: string;
  label: string;
  href?: string;
  icon?: React.ReactNode;
}

interface BottomNavBarProps extends React.HTMLAttributes<HTMLElement> {
  items: BottomNavBarItem[];
  activeId?: string;
  defaultActiveId?: string;
  onValueChange?: (id: string) => void;
}

export function BottomNavBar({
  items,
  activeId,
  defaultActiveId,
  onValueChange,
  className,
  ...props
}: BottomNavBarProps) {
  const [internalActive, setInternalActive] = React.useState(
    defaultActiveId ?? items[0]?.id
  );

  const currentActive = activeId ?? internalActive;

  const handleSelect = React.useCallback(
    (id: string) => {
      if (activeId === undefined) {
        setInternalActive(id);
      }
      onValueChange?.(id);
    },
    [activeId, onValueChange]
  );

  return (
    <nav
      className={cn("w-full", className)}
      aria-label="Bottom navigation"
      {...props}
    >
      <div className="flex items-center justify-between border-t border-border bg-card px-2 py-2">
        {items.map((item) => {
          const ItemComponent: React.ElementType = item.href ? "a" : "button";
          const isActive = item.id === currentActive;

          return (
            <ItemComponent
              key={item.id}
              {...(item.href ? { href: item.href } : { type: "button" })}
              onClick={() => handleSelect(item.id)}
              aria-current={isActive ? "page" : undefined}
              className={cn(
                "flex flex-1 flex-col items-center gap-1 rounded-md px-3 py-2",
                "text-xs font-medium transition-colors",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                isActive
                  ? "bg-muted text-primary"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground"
              )}
            >
              {item.icon ? (
                <span className="text-base text-inherit">{item.icon}</span>
              ) : null}
              <span>{item.label}</span>
            </ItemComponent>
          );
        })}
      </div>
    </nav>
  );
}
Bottom Nav Bar

Dependencies

Files

Installation
