Navigation Controls

Vertical Tabs

Vertical category navigation sidebar. 88px wide, each item holds a 64×64 circular logo and a 12px label. A 3px violet right-edge indicator marks the active item.

V 1.0View in Storybook
Controls
Active item

Variants

Selected — first itemActive state on the first category
Selected — middle itemActive state on a mid-list category

Props

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

Code

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

<VerticalTabs
  items={[
    { label: 'Grocery',  logo: <GroceryLogo /> },
    { label: 'Pharma',   logo: <PharmaLogo />  },
    { label: 'Fashion',  logo: <FashionLogo /> },
  ]}
  activeIndex={activeIndex}
  onSelect={setActiveIndex}
/>