> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Overview: the Menus editor

# 🧭 Overview: the Menus editor

⚠️ First, a point worth clarifying: in Celestory, a "Menu" is **not** the navigation of the tool you use to create. It's a screen inside **your** finished app — a home screen, a pause screen, settings — that your players will see. It has nothing to do with the Creator's own floating windows.

This article is an **overview**, not a full walkthrough. For the step-by-step of building one, head to the article **Create a Menu and its Pages**. Here, we look at the structure instead: what it's for, its core concepts, and the main families of elements available.

---

## 🔑 What is a menu?

A menu is a screen outside your story, independent from your Graph. There are four types:

- **HUD**: the persistent zone shown while a module is being played (a gauge, a score, a pause button…).
- **Home**: your application's home screen.
- **Page**: a free additional page — credits, settings, about…
- **Overlay**: a window that opens on top of the ongoing story, without leaving it.

---

## 🚪 How to open it

Open your project menu (the blue button top left), then **Menus**, or use the shortcut `Cmd+Shift+U` (`Ctrl+Shift+U` on Windows) directly.

---

## 🧱 The elements placed on a page

A menu page is a stack of **elements** you arrange and organize. Three main families:

- **Content**: Text, Image, Video, Sound, HTML5, Web page, Variable (shows different text depending on a variable's value).
- **Layout**: Horizontal group, Vertical group, Spacer — used to organize your elements together, like stackable containers.
- **Interactive settings**: Music slider, Sound slider, Simple gauge — sliders and indicators driven by your variables.

🔺 Each element has its own style and appearance: it does not automatically inherit the application's global theme.

---

## 🔘 Linking a button to an action

One last family deserves a closer look: **buttons**. Unlike a Graph block, a menu button is not linked to anything by a wire. Its action is a simple setting, chosen in its own edit window:

- **Open menu**: navigates to another menu page.
- **Open overlay** / **Close overlay**.
- **Start**: launches a module (with the option to reset the variables).
- **Continue**: resumes a story already in progress.
- **Internet link**: opens an external URL.
- **Change language**: switches the app to another language.
- **Social networks**: a block of links to your social accounts.

---

## 🌳 Menu vs Graph: no flow logic

Here is the real structural difference. The Graph is a network of blocks connected by wires, with branches, conditions, a story that unfolds over time.

A menu, on the other hand, has **no** flow logic: no wires, no branching, no sequence. It's a static page, organized into stacked groups, where each button triggers a fixed, immediate action. The only hint of "logic" is the Variable element, which shows different text depending on a value — but it never chains decisions the way the Graph does.

🔺 All narrative logic stays in the Graph; menus exist for dressing and navigation around your story.

---

→ Next step: move on to the practical side with the article **Create a Menu and its Pages**, which details creating a page and adding your first elements.