Umbraco Menu

What is it?

Menus are extension components that display throughout the Umbraco backoffice interface, including in sidebars and button flyouts. They serve as containers for one or more menu item extensions, enabling organized navigation and action grouping. Menu items are configured separately and can be added to existing menus or custom menus.

Documentation

Always fetch the latest docs before implementing:

Main docs: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/menu
Menu Items: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/menu-item
Tutorial: https://docs.umbraco.com/umbraco-cms/tutorials/extending-the-help-menu
Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation
Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Workflow

Fetch docs - Use WebFetch on the URLs above
Ask questions - New menu or extend existing? What items? Where displayed?
Generate files - Create manifest for menu + menu items based on latest docs
Explain - Show what was created and how to test

Minimal Examples

Custom Menu (umbraco-package.json)

{
  "type": "menu",
  "alias": "My.Menu",
  "name": "My Menu"
}

Menu Item for Custom Menu (manifest.ts)

export const manifests = [
  {
    type: "menuItem",
    kind: "link",
    alias: "My.MenuItem",
    name: "My Menu Item",
    weight: 100,
    meta: {
      menus: ["My.Menu"],
      label: "My Item",
      icon: "icon-document",
      href: "/my-link"
    }
  }
];

Extending Existing Menu (Help Menu Example)

{
  "type": "menuItem",
  "kind": "link",
  "alias": "My.MenuItem.Help",
  "name": "Custom Help Item",
  "weight": 300,
  "meta": {
    "menus": ["Umb.Menu.Help"],
    "label": "My Documentation",
    "icon": "icon-help",
    "href": "https://my-docs.com"
  }
}

TypeScript Import (Help Menu)

import { UMB_HELP_MENU_ALIAS } from "@umbraco-cms/backoffice/help";

const manifest = {
  type: "menuItem",
  kind: "link",
  alias: "My.MenuItem.Help",
  name: "My Help Item",
  meta: {
    menus: [UMB_HELP_MENU_ALIAS],
    label: "Documentation",
    icon: "icon-book"
  }
};

Common Built-in Menus

Umb.Menu.Help - Help menu in header
Umb.Menu.Content - Content section menu
Umb.Menu.Media - Media section menu
Umb.Menu.Settings - Settings section menu

Key Properties

type: "menu" for menu container, "menuItem" for items
alias: Unique identifier
menus: Array of menu aliases this item should appear in
weight: Controls ordering (higher = later in list)
kind: Menu item type ("link", "default", etc.)

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.

umbraco-menu