# Menu Creation Tutorial

This tutorial will guide you from scratch to create a complete menu, helping you quickly master the menu creation method of KaMenu.

***

## 🎯 Learning Objectives

Through this tutorial, you will learn to:

* ✅ Create the basic structure of a menu file
* ✅ Configure the menu title and settings
* ✅ Add text content
* ✅ Add item displays
* ✅ Add input components
* ✅ Configure buttons and actions
* ✅ Use conditional logic

***

## 📄 Step 1: Create the menu file

### 1.1 Create the file location

Create a new file under `plugins/KaMenu/menus/` directory, and it is recommended to use a meaningful file name:

```
plugins/KaMenu/menus/
└── my_first_menu.yml    # Create this file
```

### 1.2 Basic structure

To create a menu, we first need to understand the structure of a menu. A complete menu file usually includes`Title`、`Body`、`Inputs`、`Bottom`these four areas to display content. In addition, there are`Settings`and`Events`to extend the menu's functionality.

#### Parameter description

| Parameter  | Description                                          | Required | Jump to documentation                                               |
| ---------- | ---------------------------------------------------- | -------- | ------------------------------------------------------------------- |
| `Title`    | The title text at the top of the menu                | ✅        | [🎬 Menu Title (Title)](/plugins/kamenu-en/menu/layout.md)          |
| `Body`     | The area that usually displays information           |          | [🧩 Content Components (Body)](/plugins/kamenu-en/menu/body.md)     |
| `Inputs`   | The area for creating input components               |          | [⌨️ Input Components (Inputs)](/plugins/kamenu-en/menu/inputs.md)   |
| `Bottom`   | The button area at the bottom                        | ✅        | [📋 Bottom Buttons (Bottom)](/plugins/kamenu-en/menu/bottom.md)     |
| `Settings` | Used to configure some options for the menu          |          | [⚙️ Global Settings (Settings)](/plugins/kamenu-en/menu/setting.md) |
| `Events`   | Used to configure the open/close actions of the menu |          | [🎯 Events (Events)](/plugins/kamenu-en/menu/events.md)             |

{% hint style="info" %}
Did you know? In fact, all areas are optional. You can create an empty file, and KaMenu can still open it, but that would be meaningless.
{% endhint %}

***

Create my first menu:

```yaml
# Menu title
Title: '&6My First Menu'

# Optional: Global settings
Settings:
  can_escape: true
  after_action: CLOSE

# Optional: actions executed when the menu opens
Events:
  Open:
    - 'tell: &aWelcome to the menu!'

# Optional: content display area
Body:
  ...

# Optional: input components area
Inputs:
  ...

# Bottom button area
Bottom:
  ...
```

**Current status:** You now have a basic empty menu framework!

***

## 📝 Step 2: Add text content

### 2.1 Add a welcome message

Create a new file under `Body` Add a text component to the node:

```yaml
Title: '&6My First Menu'

Body:
  welcome:
    type: 'message'
    text:
      - '&7Welcome to the server shop'
      - '&7Click the button below to browse items'
```

### 2.2 Add separators and notes

```yaml
Body:
  welcome:
    type: 'message'
    text:
      - '&7Welcome to the server shop'
      - '&7Click the button below to browse items'

  separator:
    type: 'message'
    text: '&8————————————————'

  tips:
    type: 'message'
    text:
      - '&eTip:'
      - '&7- Please make sure you have enough balance before buying'
      - '&7- If you have any questions, please contact an administrator'
```

**Current status:** Your menu will now display a welcome message and some tip text.

***

## 🎨 Step 3: Add item displays

### 3.1 Add a single item

```yaml
Body:
  # ... previous text content ...

  diamond_item:
    type: 'item'
    material: 'DIAMOND'
    name: '&6&lDiamond'
    lore:
      - '&7A precious gem'
    description: '&fClick the button below to get it'
```

### 3.2 Add multiple items

```yaml
Body:
  # ... previous text content ...

  diamond_item:
    type: 'item'
    material: 'DIAMOND'
    name: '&6&lDiamond'
    lore:
      - '&7A precious gem'
    description: '&fClick the button below to get it'

  iron_ingot:
    type: 'item'
    material: 'IRON_INGOT'
    name: '&f&lIron Ingot'
    lore:
      - '&7A common metal'
    description: '&fClick the button below to get it'

  gold_ingot:
    type: 'item'
    material: 'GOLD_INGOT'
    name: '&e&lGold Ingot'
    lore:
      - '&7A rare metal'
    description: '&fClick the button below to get it'
```

**Tip:** Item material names support multiple formats, such as `diamond_sword`、`Diamond-Sword`、`diamond sword` and so on.

**Current status:** Your menu now displays three items, and each item has a name and description.

***

## 🎯 Step 4: Add input components

### 4.1 Add a quantity selection slider

```yaml
Inputs:
  diamond_amount: 
    type: 'slider'
    text: '&aSelect the amount of diamonds to get'
    min: 1
    max: 64
    default: 1
```

### 4.2 Add more input components

```yaml
Inputs:
  diamond_amount:
    type: 'slider'
    text: '&aSelect the amount of diamonds to get'
    min: 1
    max: 64
    default: 1

  note:
    type: 'input'
    text: '&7Note information'
    default: ''
    placeholder: 'Optional...'
```

**Current status:** Now players can choose the amount to obtain and add note information.

When we create the`Inputs`component, each component will correspond to a built-in key. Using the menu above as an example:`diamond_amount`the value of the slider will correspond in actions to`$(diamond_amount)`,`note`the value of the input box will correspond in actions to`$(note)`

***

## 🔘 Step 5: Add bottom buttons

### 5.1 Simple confirm button

```yaml
Bottom:
  type: 'notice'
  confirm:
    text: '&a[ Get ]'
    actions:
      - 'item: type=give;mats=DIAMOND;amount=$(diamond_amount)' 
      - 'tell: &aSuccess! Received $(diamond_amount) items'
      # Using the built-in key $(diamond_amount) will automatically parse to the slider value.
      - 'sound: entity.player.levelup'
```

### 5.2 Complete button configuration

```yaml
Bottom:
  type: 'notice'
  confirm:
    text: '&a[ Get ]'
    actions:
      - 'item: type=give;mats=DIAMOND;amount=$(diamond_amount)'
      - 'tell: &aSuccess! Received $(diamond_amount) items'
      # Using the built-in key $(diamond_amount) will automatically parse to the slider value.
      - 'tell: &aThe note you entered is: $(note)'
      # Using the built-in key $(note) will automatically parse to the input box value.
      - 'sound: entity.player.levelup'
  cancel:
    text: '&c[ Cancel ]'
    actions:
      - 'tell: &7Purchase cancelled'
      - 'close'
```

**Current status:** Your menu now has confirm and cancel buttons, and clicking them will execute the corresponding actions.

***

## 🎨 Step 6: Use conditional logic

### 6.1 Show different content based on player status

In KaMenu, most areas can use conditional logic to display customized content.

* Normal mode:

```yaml
Body:
  player_status:
    type: 'message'
    text: 'Hello, welcome to the server!'
```

* Use conditional logic

```yaml
Body:
  player_status:
    type: 'message'
    text:
      - condition: '%player_is_op% == true' 
        allow: '&6Hello, administrator, welcome to the server!'
        deny: '&7Hello, player, welcome to the server!'
```

### 6.2 Use conditions in actions

```yaml
Bottom:
  type: 'notice'
  confirm:
    text: '&a[ Confirm ]'
    actions:
      - condition: "%player_level% >= 10"
        allow:
          - 'tell: Your level is greater than or equal to 10, allowing this action to be executed...'
            ...
        deny:
          - 'tell: Your level is less than 10, unable to execute this action...'
            ...
```

**Current status:** Your menu will now respond intelligently based on the player's status.

***

## 🚀 Test your menu

### 7.1 Reload the plugin

```bash
/km reload
```

### 7.2 Open the menu

```bash
/km open my_first_menu
```

Or use Tab completion:

```bash
/km open <press Tab>
```

### 7.3 Test the features

* ✅ Check whether the menu opens properly
* ✅ Check whether the text and items display correctly
* ✅ Test whether the slider can be dragged
* ✅ Test whether the button clicks work properly
* ✅ Test whether the conditional logic takes effect

***

## 📚 Advanced topics

Once you master the basics, you can explore more advanced features:

### Layout and style

* [🧩 Content Components (Body)](/plugins/kamenu-en/menu/body.md) - Learn about all available component types
* [⌨️ Input Components (Inputs)](/plugins/kamenu-en/menu/inputs.md) - Explore various input components
* [📋 Bottom Buttons (Bottom)](/plugins/kamenu-en/menu/bottom.md) - Customize button layouts

### Interaction and actions

* [🤖 Actions (Actions)](/plugins/kamenu-en/menu/actions.md) - Learn about all available actions
* [❓ Conditional logic (Conditions)](/plugins/kamenu-en/menu/conditions.md) - Master the use of conditional logic

### Other features

* [⚙️ Global Settings (Settings)](/plugins/kamenu-en/menu/setting.md) - Configure menu behavior
* [🎯 Events (Events)](/plugins/kamenu-en/menu/events.md) - Respond to menu events
* [🗄️ Data Storage (Storage)](/plugins/kamenu-en/data/storage.md) - Use a database to store data

***

## 🎉 Congratulations!

You have successfully created your first KaMenu menu!

Continue exploring more features and possibilities to create a richer menu experience!

If you have any questions, please refer to the detailed documentation or contact community support.


---

# 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://katacr.gitbook.io/plugins/kamenu-en/menu/creating_menu.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.