Skip to main content

​
CategoryTabs

A horizontal tab bar that displays menu categories with an active indicator. Sticks to the top of the viewport as the user scrolls through the menu.

​
Preview

View in Storybook

​
Import

import { CategoryTabs } from '@/components/CategoryTabs'

​
Usage

<CategoryTabs
  categories={categories}
  activeCategory={activeCategoryId}
  onCategoryChange={(id) => scrollToCategory(id)}
/>

​
Props

​
categories
Category[]
required
Array of menu categories to display as tabs.
​
activeCategory
string
required
The ID of the currently active/visible category.
​
onCategoryChange
(categoryId: string) => void
required
Callback fired when a tab is clicked — typically scrolls to the category section.

​
Behavior

  • Sticks to the top of the viewport below the header on scroll
  • Highlights the active category based on scroll position
  • Horizontally scrollable on mobile for long category lists
  • Smooth-scrolls the active tab into view automatically