umbraco-menu

Original：🇺🇸 English

Translated

Implement menus in Umbraco backoffice using official docs

1installs

Sourceumbraco/umbraco-cms-backoffice-skills

Added on2026-02-13

NPX Install

npx skill4agent add umbraco/umbraco-cms-backoffice-skills umbraco-menu

SKILL.md Content

View Translation Comparison →

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)

json

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

Menu Item for Custom Menu (manifest.ts)

typescript

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)