Navigation

Navigation is a controlled, fixed bottom navigation bar whose selected item is determined by its zero-based child index.

Usage

import Navigation from "@repo/ui/Navigation";

<Navigation value={activeIndex} onChange={setActiveIndex}>
  <Navigation.Item>خانه</Navigation.Item>
  <Navigation.Item>حساب</Navigation.Item>
</Navigation>;

Installation

npx the-dig@latest add Navigation

Props

Prop	Type	Required
value	number	Yes
onChange	(newValue: number) => void	Yes
children	ReactNode	Yes

Navigation.Item

Items accept HTMLProps<HTMLDivElement> and children/className. active and onClick are injected by the parent; selection is positional and only direct Navigation.Item children are enhanced.

Add navigation/tab roles, keyboard activation, and an accessible current-item state in the consuming UI; the base implementation renders clickable div elements.