> ## Documentation Index
> Fetch the complete documentation index at: https://strapi-suite.littlebox.pt/llms.txt
> Use this file to discover all available pages before exploring further.

# Menus

> Learn how to create dynamic menus and connect them to the frontend using the API

Menus is a module that lets you manage navigation menus through an intuitive drag-and-drop interface.
It also provides a simple API for easy integration with the frontend.

You can build the frontend however you like, but our [ready-to-use Next.js Frontend](/frontend/introduction) makes integration easier by handling repetitive tasks for you.

## How to create a menu?

**Step 1**: Access the Strapi admin panel.\
**Step 2**: Go to the <i>Littlebox Strapi Suite</i>.\
**Step 3**: Select "Menu".\
**Step 4**: Click "Create new entry".\
**Step 5**: Set a title and a UID. The UID is used to fetch menu data through the [API](/backend/guides/menus#api).

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/littlebox/-V-36Cf2XSVdHw_h/images/backend-menu-step-1.png?fit=max&auto=format&n=-V-36Cf2XSVdHw_h&q=85&s=c9da3075bd002cc73f0210b028777c17" width="3012" height="1708" data-path="images/backend-menu-step-1.png" />

**Step 6**: Add new items to the menu.\
**Step 7**: Click the `::` icon to drag and reorder the items.\
**Step 8**: To create nested items, click the `+` icon on an existing item.

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/littlebox/-V-36Cf2XSVdHw_h/images/backend-menu-step-3.png?fit=max&auto=format&n=-V-36Cf2XSVdHw_h&q=85&s=9e71a3d1345bd0fdc193efbe99c5d776" width="3008" height="1706" data-path="images/backend-menu-step-3.png" />

**Step 9**: Click the `edit` icon to view or edit the link properties. You can either set a custom URL or link to existing content using a defined [slug](/backend/guides/slug). This is useful because if the content slug changes, the menu updates automatically. You can also define the link target:

* `_blank` Opens the linked document in a new window or tab.
* `_self`	Opens the linked document in the same frame as it was clicked.
* `_parent`	Opens the linked document in the parent frame.
* `_top` Opens the linked document in the full body of the window.

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/littlebox/-V-36Cf2XSVdHw_h/images/backend-menu-step-2.png?fit=max&auto=format&n=-V-36Cf2XSVdHw_h&q=85&s=db4a1dd80f7eb5df64f0382a943d81c8" width="1408" height="842" data-path="images/backend-menu-step-2.png" />

**Step 10**: Each menu item includes metadata. You can use this metadata to build more dynamic and visually rich menus on the frontend, making it easier to manage everything in one place.

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/littlebox/-V-36Cf2XSVdHw_h/images/backend-menu-step-4.png?fit=max&auto=format&n=-V-36Cf2XSVdHw_h&q=85&s=43af7a1878c91b2518d97ee541aff5f8" width="1408" height="828" data-path="images/backend-menu-step-4.png" />

<img style={{ borderRadius: '0.5rem' }} src="https://mintcdn.com/littlebox/-V-36Cf2XSVdHw_h/images/backend-menu-step-5.png?fit=max&auto=format&n=-V-36Cf2XSVdHw_h&q=85&s=9ad0fdae64908629fb4a2e9572bcee5c" width="1740" height="866" data-path="images/backend-menu-step-5.png" />

## API

To get the data from the frontend, use your preferred HTTP client:

```bash theme={null}
curl -X GET "/api/littlebox-strapi-suite/modules/menus?locale=<LOCALE>"
```

```json theme={null}
[
    {
        "id": 1,
        "documentId": "rvycb4q234yqz47g1v69mzkm",
        "title": "Header",
        "uid": "header",
        "locale": "en",
        "createdAt": "2025-04-13T19:43:24.092Z",
        "updatedAt": "2025-04-13T19:48:35.207Z",
        "publishedAt": "2025-04-13T19:43:24.092Z",
        "children": [
            {
                "id": 1,
                "documentId": "k6phd1g4cf7ysqw527ok78d5",
                "menuId": "rvycb4q234yqz47g1v69mzkm",
                "parentId": null,
                "title": "Experiences",
                "url": "experiences",
                "target": "_self",
                "order": 1,
                "metadata": {},
                "createdAt": "2025-04-13T19:48:35.216Z",
                "updatedAt": "2025-04-13T19:48:35.216Z",
                "publishedAt": "2025-04-13T19:48:35.216Z",
                "children": [
                    {
                        "id": 2,
                        "documentId": "leb5vbdlthaw9uvbfo8njwsv",
                        "menuId": "rvycb4q234yqz47g1v69mzkm",
                        "parentId": "1",
                        "title": "Dolphin Watching",
                        "url": "experiences/dolphin-watching",
                        "target": "_blank",
                        "order": 1,
                        "metadata": {},
                        "createdAt": "2025-04-13T19:48:35.224Z",
                        "updatedAt": "2025-04-13T19:48:35.224Z",
                        "publishedAt": "2025-04-13T19:48:35.225Z",
                        "children": []
                    }
                ]
            },
            {
                "id": 3,
                "documentId": "zakerhh8fx912il34lxkj04f",
                "menuId": "rvycb4q234yqz47g1v69mzkm",
                "parentId": null,
                "title": "Transfer",
                "url": "transfer",
                "target": "_self",
                "order": 2,
                "metadata": {},
                "createdAt": "2025-04-13T19:48:35.234Z",
                "updatedAt": "2025-04-13T19:48:35.234Z",
                "publishedAt": "2025-04-13T19:48:35.234Z",
                "children": []
            }
        ]
    }
]
```

<CardGroup cols={2}>
  <Card title="Frontend" icon="code" href="/frontend/introduction">
    Learn how our frontend streamlines integration with Strapi by automating repetitive tasks.
  </Card>

  <Card title="Hosting" icon="code" href="/hosting/plans">
    Explore our hosting solutions for staging and production environments.
  </Card>
</CardGroup>