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

# <MenuSwitcher />

> Dropdown to switch between multiple menus with availability status.

# MenuSwitcher

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

A dropdown selector that allows customers to switch between multiple menus (e.g., Breakfast, Lunch, Dinner). Displays availability status based on operating hours.

## Preview

Desktop

Mobile

## Import

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

## Usage

```tsx theme={null}
<MenuSwitcher
  menus={location.menus}
  activeMenuId={activeMenu.id}
  onMenuChange={(menuId) => setActiveMenu(menuId)}
/>
```

## Props

**menus** `Menu[]` *required*

Array of available menus for the location.

**activeMenuId** `string` *required*

The ID of the currently selected menu.

**onMenuChange** `(menuId: string) =\> void` *required*

Callback fired when a different menu is selected.

## Behavior

* Shows "Available now" or "Available at 11:00 AM" based on daypart logic
* Grays out menus outside their operating hours
* Auto-selects the first available menu on mount


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