> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <CategoryTabs />

> Sticky tab navigation for browsing menu categories.

# CategoryTabs

<Snippet file="api-key-location.mdx" />

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

Desktop

Mobile

## Import

```tsx theme={null}
import { CategoryTabs } from '@/components/CategoryTabs'
```

## Usage

```tsx theme={null}
<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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.