# Navigation

The **Menu** is designed for a smooth and engaging customer experience, built around a dynamic and intuitive navigation system. Every interaction is designed to help users quickly find what they’re looking for — or discover something new.

### Carousel-Based Navigation

The menu is organized using **carousels** of **expandable cards**. Each card represents a product and is displayed with a preview image or 3D model (if available).

* Users can **scroll horizontally** through the carousel within each category
* Categories are presented one after another and can be quickly browsed
* Cards are responsive and adapt to any screen size (mobile, tablet, desktop)

{% hint style="info" %}
**Reminder:** All content, layout, and categorization is managed through the **Manager app** — updates sync automatically to the Menu in real time.
{% endhint %}

### Interactive 3D

As customers move through the cards:

* The **3D model updates in real time**, reflecting the item currently in focus
* This allows users to visually evaluate the dishes before selecting anything
* If no 3D model is available, the placeholder or image will remain static

This interaction creates a dynamic experience that’s both intuitive and visually rich.

{% hint style="success" %}
**Tip:** Highlight a few key products with engaging 3D scans to draw attention as users scroll. First impressions matter.
{% endhint %}

### Expanded View

Clicking on a card opens a **detailed view** of the product, showing:

* Full product name and description
* Ingredients and allergen information
* Nutritional values (if provided)
* Variants (if the product includes size or flavor options)
* Optional order button (if Orders are active for the store)

Users can **close the expanded view** to return to browsing at any time.

### Shuffle Mode

The **Shuffle button** offers a discovery experience. When tapped:

* The menu will **suggest products automatically**, one at a time
* These suggestions are shown as expanded cards
* Customers can use it to explore the menu passively, without manual scrolling

This feature is perfect for indecisive customers or for promoting featured items.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://replate.gitbook.io/replate-docs/menu/navigation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.