App tab bar

A bottom app navigation bar with a gliding active marker and count badges.

New

Gamma mobileToday

The navigation stays at the bottom, where a thumb can reach it, and the active wash moves between four equal destinations.

Implementation

1"use client";2 3import {4  useState,5  type CSSProperties,6  type HTMLAttributes,7  type ReactNode,8} from "react";9 10export type AppTabItem = {11  id: string;12  label: string;13  /** A 20–22px icon. Decorative; the label names the destination. */14  icon: ReactNode;15  href?: string;16  /** Short count or status shown beside the icon. */17  badge?: string | number;18};19 20export type AppTabBarProps = Omit<21  HTMLAttributes<HTMLElement>,22  "children" | "onChange"23> & {24  items: AppTabItem[];25  /** Accessible name for the navigation landmark. */26  label?: string;27  value?: string;28  defaultValue?: string;