> For the complete documentation index, see [llms.txt](https://docs.myarc.icu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.myarc.icu/en/menu-configuration/menus/groups-templates.md).

# Groups and reusable templates

As a menu grows, keeping the pieces of a product card, a navigation row, or a popup dialog organized becomes much easier when you place them inside a group (`group`). For components that appear across several menus, you can also save a group as a template and insert it whenever you need it.

## Frontend groups (`group` in `frontend`)

A frontend group is an invisible container that holds any number of child elements inside `children`, including nested groups:

```yaml
frontend:
  greeting-group:
    type: group
    offset: {x: 40, y: -20, z: 1}
    children:
      greeting-background:
        type: rectangle
        width: 60
        height: 18
        color: '#365E91'
      greeting-text:
        type: text
        content: '&fSay hello'
        size: 4
        offset: {z: 1}
```

Coordinates, rotation, and scale for elements inside `children` are all calculated **relative to the parent group's center**. In the example above:

* Both `greeting-background` and `greeting-text` have `x` and `y` at `0`, placing them right at the center of `greeting-group`.
* `greeting-group` sets `offset: {x: 40, y: -20, z: 1}`, moving the background and text together to `(40, -20)` on the canvas.
* The text's `offset.z: 1` adds onto the group's `z: 1` for a final depth of `2`, keeping the text cleanly in front of the background.

| Group property | Value and effect on children                                                                                 |
| -------------- | ------------------------------------------------------------------------------------------------------------ |
| `offset`       | Translates all child elements in the group together (`{x, y, z}`).                                           |
| `rotation`     | Rotates all child elements around the group's origin (`{x, y, z}`, in degrees).                              |
| `scale`        | Scales both the size of child elements and their distance from the group center (non-zero `x` and `y` only). |
| `visible`      | Set to `true` or `false` to show or hide the entire group and all of its descendants at once.                |
| `children`     | Required map containing child elements in `element-id: {element-config}` format.                             |

## Backend groups (`group` in `backend`)

If you build a row of buttons with a frontend group and later decide to shift the whole row 30 units to the right, updating every backend click region one by one would be tedious. To avoid that, `backend` also supports `type: group`:

```yaml
backend:
  nav-hit-group:
    type: group
    x: 40
    y: -20
    scale: {x: 1, y: 1}
    children:
      greeting-area:
        x: 0
        y: 0
        width: 60
        height: 18
        actions:
          right: 'tell: &aHello!'
```

Backend groups can be nested and use a simple set of fields:

* `type`: Always set to `group`.
* `x`, `y`: Horizontal and vertical offset of the group relative to the canvas center (or parent backend group). Defaults to `0`.
* `scale`: Scale factors with `x` and `y` (non-zero numbers, defaulting to `1`). Scales both the center offsets and the width/height of child click regions.
* `children`: Contains individual click regions or further nested backend groups.

When loading a menu, the server automatically converts backend group offsets and scales into the final canvas rectangle for each click region. Note that across the entire menu—whether in `frontend` or `backend`, and regardless of nesting depth—**every group, visual element, and click region key (ID) must be unique**.

## Reusable template files

Once you have designed a button or card group that you want to reuse across other menus, you can turn it into a template file under `plugins/ArcMenu/templates/` (subfolders are supported for organization).

Each template file contains a top-level `id` and a **single root group** under `frontend`:

```yaml
schema-version: 1
id: greeting-button
frontend:
  button-group:
    type: group
    children:
      button-background:
        type: rectangle
        width: 60
        height: 18
        color: '#365E91'
      button-text:
        type: text
        content: '&fSay hello'
        size: 4
        offset: {z: 1}
```

| Top-level template field | Requirements                                                                                                                                                                           |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `schema-version`         | Always set to `1`.                                                                                                                                                                     |
| `id`                     | Unique template ID. Must start with a lowercase letter or digit, contain only lowercase letters, digits, underscores (`_`), and hyphens (`-`), and remain unique across all templates. |
| `frontend`               | Must contain a single root group with `type: group`, which can freely contain any frontend elements and nested subgroups.                                                              |

If you save the example above as `plugins/ArcMenu/templates/greeting-button.yml`, run `/arcmenu reload all` to refresh the template library, or run `/arcmenu templates` to view all loaded templates.

## Saving and inserting templates in the visual editor

Working with templates directly in the [Visual editor](/en/feature-configuration/editor.md) is much quicker than writing template files by hand:

1. **Save as a template**: Select any group in the editor's frontend view, click save as template, and enter a template ID. The server will generate the YAML file automatically.
2. **Insert a template**: While editing another menu, pick a template from the template library to insert it onto the canvas. The inserted content becomes an independent normal group in that menu, and if any element IDs conflict with existing elements in the menu, the editor renames them automatically.
3. **Customize**: Adjust the inserted group's position, text, and colors however you like, then switch to the `backend` tab to draw its click regions.

You can also open the [Project manager](/en/feature-configuration/projects.md) to browse and preview templates by folder, or bundle templates together with menus and Effects into an [ArcPack](/en/feature-configuration/arcpack.md) to share with others.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.myarc.icu/en/menu-configuration/menus/groups-templates.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.