Menu
Implement menus in Umbraco backoffice using official docs
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-menuThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Based on SOC occupation classification
Run tests from skill examples and generate a report (project)
Validate links and references in SKILL.md files using deterministic scripts
Umbraco backoffice extension customisation - complete working examples showing how extension types combine
Showing SKILL.md
| name | umbraco-menu |
| description | Implement menus in Umbraco backoffice using official docs |
| version | 1.0.0 |
| location | managed |
| allowed-tools | Read, Write, Edit, WebFetch |
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.
Always fetch the latest docs before implementing:
{
"type": "menu",
"alias": "My.Menu",
"name": "My Menu"
}
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"
}
}
];
{
"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"
}
}
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"
}
};
"menu" for menu container, "menuItem" for items"link", "default", etc.)That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.