AnythinkDocs
See something missing?
powered by

Menu Configuration

Anythink lets you create custom navigation menus for your application. Define menu items with labels, icons, links, and nested sub-items — then serve them via API to drive navigation in your frontend.

What menus are for

Menus in Anythink are a flexible way to manage your application's navigation structure from the dashboard, without hardcoding links into your frontend code. Your frontend fetches the menu via API and renders it — change a menu item in the dashboard and the change appears in your app immediately, no redeployment needed.

This is useful for:

  • Application sidebars and top navigation bars
  • Content management systems where editors control navigation
  • Multi-tenant apps where each organisation has different menus
  • White-label products where navigation varies per customer

Creating a menu

From the dashboard

  1. Go to Settings → Menus
  2. Click New Menu and give it a name (e.g. main-nav, sidebar)
  3. Add menu items with a display name, link (href), and optional icon
  4. Drag items to reorder or nest them

Via the API

Create a menu:

http 
POST /org/{orgId}/menus
json 
{
  "name": "main-nav"
}

Menu items

Each menu item has:

Field Type Description
displayName string The label shown in the UI
href string The link destination
icon string Icon name or identifier
sortOrder integer Position in the list
parentId integer ID of parent item (for nested menus)

Adding items to a menu

http 
POST /org/{orgId}/menus/{menuId}/items
json 
{
  "displayName": "Products",
  "href": "/products",
  "icon": "package",
  "sortOrder": 1
}

Nested item — add a parentId to nest under another item:

json 
{
  "displayName": "Featured Products",
  "href": "/products/featured",
  "icon": "star",
  "sortOrder": 1,
  "parentId": 5
}

Retrieving menus

Get the current user's menu (respects role-based menu assignment):

http 
GET /org/{orgId}/menus/my

Get all menus:

http 
GET /org/{orgId}/menus

Get a specific menu with all its items:

http 
GET /org/{orgId}/menus/{menuId}

The response includes the full menu structure with nested items:

json 
{
  "id": 1,
  "name": "main-nav",
  "items": [
    {
      "id": 10,
      "displayName": "Products",
      "href": "/products",
      "icon": "package",
      "sortOrder": 1,
      "items": [
        {
          "id": 11,
          "displayName": "Featured",
          "href": "/products/featured",
          "sortOrder": 1
        }
      ]
    }
  ]
}

Updating and reordering

Update a menu item:

http 
PUT /org/{orgId}/menus/{menuId}/items/{itemId}

Reorder items — pass a list of IDs in the desired order:

http 
PUT /org/{orgId}/menus/{menuId}/items/reorder
json 
[
  { "id": 12, "sortOrder": 1 },
  { "id": 10, "sortOrder": 2 },
  { "id": 11, "sortOrder": 3 }
]

Deleting

Delete a menu item:

http 
DELETE /org/{orgId}/menus/{menuId}/items/{itemId}

Delete an entire menu:

http 
DELETE /org/{orgId}/menus/{menuId}

Using menus in your frontend

Fetch the menu on page load and render it dynamically:

javascript 
const orgId = 'YOUR_ORG_ID';
const token = 'USER_JWT';

const res = await fetch(
  `https://api.my.anythink.cloud/org/${orgId}/menus/my`,
  { headers: { 'Authorization': `Bearer ${token}` } }
);
const menu = await res.json();

// menu.items is a nested array — render recursively
function renderMenu(items) {
  return items.map(item => ({
    label: item.displayName,
    href: item.href,
    icon: item.icon,
    children: renderMenu(item.items || [])
  }));
}