Navigation Controls

Slider Tabs

Horizontal underline tab bar. 48px height, white background, 2px violet bottom-indicator on the active tab. Tabs share equal width and support 2–4 items.

V 1.0View in Storybook
Controls
Tab count
3
Active tab

Variants

2-tab barFirst tab active
3-tab bar — all active positionsActive tab cycling through positions 1, 2, and 3
4-tab barSecond tab active

Props

Name
Type
Default
tabs
string[]
—
activeIndex
number
0
onSelect
(i: number) => void
—

Code

import { SliderTabs } from '@/src/components/Navigation/SliderTabs'

const [active, setActive] = useState(0)

<SliderTabs
  tabs={['Home', 'Search', 'Profile']}
  activeIndex={active}
  onSelect={setActive}
/>