NavigationTabs

A fixed bottom navigation bar that uses React Router's Link and matchPath to determine which tab is active based on the current URL. It renders via a Portal so it is positioned at the bottom of the viewport regardless of DOM nesting. Each tab supports an optional icon and a custom renderTab function.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | tabs | Tab[] | Yes | — | Array of tab definitions. Each tab has id, label, link, and optional icon and extra fields. | | renderTab | (tab: Tab, isActive: boolean) => React.ReactNode | No | — | Custom renderer for each tab item. Receives the tab object and whether it is currently active. | | wrapperStyle | React.CSSProperties | No | — | Inline styles for the outer fixed-position wrapper. | | containerStyle | React.CSSProperties | No | — | Inline styles for the inner container (the pill bar). | | tabStyle | React.CSSProperties | No | — | Inline styles applied to each tab <Link> element. | | activeTabStyle | React.CSSProperties | No | — | Additional inline styles applied to the active tab <Link>. |

Tab shape

| Field | Type | Required | Description | |-------|------|----------|-------------| | id | string | Yes | Unique identifier for the tab. | | label | string | Yes | User-visible label. | | link | string | Yes | Route path this tab navigates to. Active state is matched against the current URL. | | icon | string | No | Icon name displayed above the label. | | [key: string] | any | No | Any additional fields are passed through and available in renderTab. |

Usage

Basic

import NavigationTabs from '@/components/tabs/NavigationTabs';

const tabs = [
  { id: 'home', label: 'Home', link: '/home', icon: 'home' },
  { id: 'orders', label: 'Orders', link: '/orders', icon: 'cart' },
  { id: 'profile', label: 'Profile', link: '/profile', icon: 'person' },
];

export default function Layout() {
  return (
    <>
      {/* page content */}
      <NavigationTabs tabs={tabs} />
    </>
  );
}

With custom tab renderer

<NavigationTabs
  tabs={tabs}
  renderTab={(tab, isActive) => (
    <span style={{ color: isActive ? '#6C3BD1' : '#999' }}>
      {tab.label}
    </span>
  )}
/>