---
url: https://docs.corbitaltech.dev/products/whatsmark-saas/admin/menu-setup.md
description: >-
  Fully customize the admin and tenant sidebar navigation in WhatsMark SaaS.
  Configure per-plan menu restrictions, tenant-level sidebar editing,
  drag-and-drop reordering, item locking, presets, and more with the Menu Setup
  system.
---

# Menu Setup 

## Overview

The **Menu Setup** system is a fully runtime-configurable navigation builder for WhatsMark SaaS. It allows Superadmins to control the structure, content, and appearance of both the admin panel sidebar and tenant sidebar — without touching any code. Tenants can optionally be given permission to personalize their own sidebar as well.

All customizations are non-destructive. The original menu definitions remain intact, and all overrides are layered on top at runtime through a priority-based configuration system.

## Who Can Use Menu Setup

| Role | What They Can Do |
|---|---|
| **Superadmin** | Customize the admin panel's own sidebar |
| **Superadmin** | Set global default sidebar appearance for all tenants |
| **Superadmin** | Configure per-plan menu so tenants only see items relevant to their plan |
| **Superadmin** | Save and reuse menu configurations as presets |
| **Tenant** | Personalize their own sidebar (only when enabled by the Superadmin) |

## Accessing Menu Setup

**Location:** Admin Panel → Setup → Menu Builder

The Menu Builder section in the admin sidebar contains four distinct editors:

1. **Admin Menu** — customize the admin panel's own sidebar
2. **Tenant Default Menu** — set the global default sidebar for all tenants
3. **Plan Menus** — configure per-plan sidebar
4. **Presets** — manage saved menu configurations

![Menu Builder Navigation](../images/menu-setup/menu-builder-nav.png)

## How the Configuration System Works

Menu customizations are applied in layers, each with a specific priority. Higher-priority layers always win over lower ones.

| Layer | Priority | Who Controls It |
|---|---|---|
| Admin sidebar customizations | — | Superadmin via Admin Menu editor |
| Tenant default sidebar | Low | Superadmin via Tenant Default Menu editor |
| Plan-level sidebar restrictions | Medium | Superadmin via Plan Menus editor |
| Tenant's own sidebar | Highest | Tenant (when enabled) |

**Key behavior:**

* A tenant's own customization always overrides the plan-level menu.
* The plan-level menu overrides the tenant default.
* The tenant default overrides the base item registration.
* If a tenant has not made any customization, the plan-level menu applies. If no plan menu is set, the tenant default applies.

***

## Admin Menu Editor

The Admin Menu editor lets the Superadmin customize the admin panel's own sidebar — the navigation the Superadmin sees when logged into the admin area.

![Admin Menu Editor](../images/menu-setup/admin-menu-editor.png)

### What You Can Do

* **Show or hide items** — toggle the visibility of any admin sidebar item or section
* **Rename items** — override the default label with a custom name
* **Change icons** — replace the default icon with any supported icon class
* **Change icon colors** — apply a custom hex color to any icon
* **Reorder items** — drag items and sections to any position
* **Move items between sections** — drag a top-level item into a section, or a child out to the top level
* **Move children between sections** — reorganize children across different section groups
* **Add custom items** — create custom link items that point to any URL

### How to Use

1. Navigate to **Admin Panel → Menu Builder → Admin Menu**
2. The editor shows two tabs: **Main Menu** and **Setup Menu**, corresponding to the two sidebar groups
3. Use the controls on each item row to configure visibility, label, icon, and color
4. Drag the handle on the left of each row to reorder items
5. Use the actions dropdown on each item to move it to a section or promote it to the top level
6. Click **Save** to apply changes. The admin sidebar updates immediately
7. Click **Reset** to clear all customizations and restore defaults

## Tenant Default Menu Editor

The Tenant Default Menu editor lets the Superadmin define what all tenant sidebars look like by default. This acts as the global baseline every tenant inherits unless a plan-level menu or their own customization overrides it.

![Tenant Default Menu Editor](../images/menu-setup/tenant-default-menu-editor.png)

### What You Can Do

All the same capabilities as the Admin Menu editor, plus:

* **Allow tenant customization toggle** — a master switch that enables or disables the ability for tenants to edit their own sidebars

### Tenant Customization Toggle

The **Allow Tenant Customization** toggle on this page is the master control for tenant-level menu editing:

* When **enabled**, tenants see a "Menu Setup" link in their sidebar settings and can personalize their navigation
* When **disabled**, the Menu Setup page is inaccessible to tenants, and only superadmin-defined defaults and plan menus apply

### How to Use

1. Navigate to **Admin Panel → Menu Builder → Tenant Default Menu**
2. Configure the menu using the same controls as the Admin Menu editor
3. Toggle **Allow Tenant Customization** to control whether tenants can edit their own sidebar
4. Click **Save** to apply. All tenants without their own customization will immediately reflect changes
5. Click **Reset** to clear the global defaults for all tenants

## Plan Menus Editor

The Plan Menus editor lets the Superadmin customize the sidebar appearance separately for each subscription plan. When you select a plan, the editor automatically loads only the menu items that belong to that plan's enabled features.

![Plan Menus Editor](../images/menu-setup/plan-menus-editor.png)

### What You Can Do

* **Select a plan** — choose any subscription plan from the dropdown to load its editor
* **Automatic item filtering** — the editor instantly shows only the items included in the selected plan's features.
* **Rename items** — override default labels for plan-specific terminology
* **Change icons and colors** — set custom icons and icon colors for any item in this plan's sidebar
* **Reorder items** — drag items and sections into the preferred order for tenants on this plan
* **Move items between sections** — restructure the navigation layout by moving items across section groups or to the top level
* **Add custom items** — insert custom link items specific to this plan's sidebar
* **Save per-plan** — each plan stores its own independent configuration; saving one plan never affects another
* **Reset per-plan** — reset a single plan's menu back to the tenant default without affecting other plans

### Plan Menu Priority

* The plan menu applies to all tenants on that plan who have **not** saved their own customization
* If a tenant has an active personal customization, their own settings take over and the plan menu is skipped
* Plan menus always override the global tenant default

### How to Use

1. Navigate to **Admin Panel → Menu Builder → Plan Menus**
2. Select a plan from the dropdown — the editor loads immediately with that plan's item set
3. Rename, reorder, change icons/colors, or add custom items as needed
4. Click **Save** to save the configuration for the selected plan
5. Click **Reset** to clear the plan's configuration and fall back to the global tenant default

## Presets

Presets let you save a complete menu configuration and reuse it across different contexts.

![Presets Manager](../images/menu-setup/presets-manager.png)

### What You Can Do

* **Save as preset** — from tenant menu editor, save the current state as a named preset with an optional description
* **Load a preset** — select a saved preset in tenant editor to load its configuration
* **Update a preset** — overwrite the saved configuration of an existing preset
* **Delete a preset** — remove a preset that is no longer needed
* **Apply a preset to tenant defaults** — apply a preset's configuration directly as the global tenant default

### How to Use

**To save the current editor state as a preset:**

1. Configure the menu in tenant editor
2. Click **Save As Preset** and enter a name and optional description
3. The preset is saved and immediately available in the preset selector

**To load a preset into the editor:**

1. Select a preset from the preset dropdown in the editor
2. The editor's current state is replaced by the preset configuration
3. Review the loaded configuration and click **Save** to apply it

**To manage all presets:**

1. Navigate to **Admin Panel → Menu Builder → Presets**
2. View all saved presets with their names and descriptions
3. Edit, delete, or apply presets from this page

## Tenant Menu Setup

When Superadmin enables tenant customization, tenants can access their own Menu Setup page to personalize their sidebar.

**Location:** Tenant Panel → Setup → Menu Setup

![Tenant Menu Setup](../images/menu-setup/tenant-menu-setup.png)

### What Tenants Can Do

* **Show or hide items** — hide sidebar links they do not use
* **Rename items** — override default labels with custom names
* **Change icons and colors** — personalize icon appearance
* **Reorder items** — rearrange the sidebar to match their workflow
* **Move items between sections** — restructure the navigation layout
* **Add custom link items** — add external or internal links to their sidebar

### Restrictions for Tenants

* Items that require features not included in the tenant's plan are not available
* The Menu Setup page is only accessible when the Superadmin has enabled tenant customization

### How to Use

1. Navigate to **Tenant Panel → Setup → Menu Setup**
2. Configure the sidebar using the available controls
3. Click **Save** to apply changes — the sidebar updates immediately
4. Click **Reset** to clear all personal customizations and return to the plan or default layout

## Editor Controls Reference

Every item in the editor supports the following controls:

| Control | Description |
|---|---|
| **Drag handle** | Drag to reorder the item within its group |
| **Visibility toggle** | Eye icon — show or hide the item in the actual sidebar |
| **Label field** | Override the default item label with a custom name |
| **Icon field** | Enter an icon class to replace the default icon. Accepts `heroicon-o-*`, `heroicon-s-*`, `heroicon-m-*`, and `carbon-*` icon classes |
| **Color picker** | Choose a custom hex color for the icon. Click the clear button to remove the color override |
| **Actions dropdown** | Move the item to a section, promote it to the top level, move it between sections, edit (custom items), or delete (custom items) |

## Custom Items

You can add entirely new sidebar entries that are not part of the default menu. Clicking **Add** in the editor presents two options:

![Custom Items](../images/menu-setup/custom-items.png)

### Option 1 — Create Group

A **Group** is a collapsible section that acts as a container for link items. Use this when you want to organize multiple related links under a single heading in the sidebar.

1. Click **Add** and select **Section**
2. Enter a name for the group and optionally set an icon and color
3. The group appears in the sidebar as a collapsible section header
4. After saving, you can add link items inside the group by move existing items into it or via the actions dropdown on any item

### Option 2 — Create Link

A **Link** is a direct sidebar entry that navigates to a specific URL when clicked. Use this for quick access to any internal page or external resource.

1. Click **Add** and select **Link item**
2. Enter a label for the link
3. Enter the destination URL (internal path or external URL)
4. Optionally set an icon and color
5. The link appears as a standalone item at the top level of the sidebar, or can be moved into a group using the actions dropdown or drag

### Custom Item Behavior

* Groups can contain link items; links can be placed at the top level or inside a group
* Both groups and links can be deleted; standard items cannot be deleted, only hidden
* Custom items created by the Superadmin in the Admin Menu are visible only in the admin panel
* Custom items created in the Tenant Default Menu appear in all tenant sidebars
* Custom items created by tenants appear only in that tenant's sidebar

## Sidebar Live Preview

While editing in any Menu Setup editor, a **live preview panel** shows exactly what the configured sidebar will look like with all current customizations applied. The preview reflects:

* Effective labels (custom override or original)
* Effective icons and colors
* Visibility state

This lets you verify the result before saving.

![Sidebar Live Preview](../images/menu-setup/sidebar-live-preview.png)

## Icon Reference

The Menu Setup editors accept icon class strings from the following icon sets:

| Format | Example |
|---|---|
| Heroicons Outline | `heroicon-o-home` |
| Heroicons Solid | `heroicon-s-star` |
| Heroicons Mini | `heroicon-m-bell` |
| Carbon Icons | `carbon-dashboard` |

Invalid icon values will be flagged with an error message below the icon field and must be corrected before saving.

## Reset Behavior

| Reset Action | What Gets Cleared |
|---|---|
| **Admin Menu Reset** | All admin sidebar customizations — reverts to code defaults |
| **Tenant Default Menu Reset** | All global tenant defaults — all tenants revert to code defaults (unless they have their own customization) |
| **Plan Menu Reset** | The selected plan's menu configuration — tenants on that plan fall back to tenant defaults |
| **Tenant Menu Reset** | The tenant's own sidebar customization — their sidebar reverts to the plan menu or tenant default |