Component

Bottom Nav

A mobile tab bar fixed to the bottom of the viewport. Shows active state and supports icon tabs. Uses the headless @refraction-ui/bottom-nav core.

Examples

A bottom navigation bar with tab items and active state.

Page Content

Installation

$pnpm add @refraction-ui/react-bottom-nav

Usage

tsx

import { BottomNav } from '@refraction-ui/react-bottom-nav'

export function MyComponent() {
  return (
    <BottomNav
      tabs={[
        { label: 'Home', href: '/' },
        { label: 'Search', href: '/search' },
        { label: 'Profile', href: '/profile' },
      ]}
      currentPath="/"
    />
  )
}

Props

Prop	Type	Default	Description
`tabs`	`NavTab[]`	--	Array of { label, href, icon?, activeIcon? } tabs.
`currentPath`	`string`	--	Current pathname for active tab highlighting.
`className`	`string`	--	Additional CSS classes.