From umbraco-cms-backoffice-skills
Implements Umbraco backoffice menu items (link, action, tree) via manifests and custom elements, fetching latest docs and generating files from examples.
npx claudepluginhub umbraco/umbraco-cms-backoffice-skills --plugin umbraco-cms-backoffice-skillsThis skill uses the workspace's default tool permissions.
---
Implements custom menus and menu items in Umbraco backoffice using official docs. Generates TypeScript or JSON manifests for new or extended menus like Help or Content.
Generates complete, testable example extensions for Umbraco backoffice using TypeScript and LitElement, runs them via Vite dev server with hot reload and mocked APIs.
Mandates invoking relevant skills via tools before any response in coding sessions. Covers access, priorities, and adaptations for Claude Code, Copilot CLI, Gemini CLI.
Share bugs, ideas, or general feedback.
Menu items are extension components that appear throughout the Umbraco backoffice in sidebars, button flyouts, and other locations. They work alongside Menu extensions to provide navigational and action-based functionality. Menu items come in different kinds (link, action, tree) and can use default components or custom elements.
Always fetch the latest docs before implementing:
The Umbraco source includes a working example:
Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/menu-item/
This example demonstrates custom menu items with different kinds. Study this for production patterns.
If you need to explain these foundational concepts when implementing menu items, reference these skills:
Umbraco Element: When implementing custom menu item elements, explaining UmbLitElement, or creating menu item components
umbraco-umbraco-elementControllers: When implementing UmbMenuItemAction, action logic, execute methods, or menu item behavior
umbraco-controllersContext API: When implementing context access or service consumption from menu item actions
umbraco-context-apiexport const manifests = [
{
type: "menuItem",
kind: "link",
alias: "My.MenuItem.Link",
name: "My Link Menu Item",
weight: 100,
meta: {
label: "External Link",
icon: "icon-link",
menus: ["Umb.Menu.Help"],
href: "https://example.com"
}
}
];
export const manifests = [
{
type: "menuItem",
kind: "action",
alias: "My.MenuItem.Action",
name: "My Action Menu Item",
api: () => import('./menu-item-action.js'),
meta: {
label: "Execute Action",
icon: "icon-wand",
menus: ["My.Menu"]
}
}
];
import { UmbMenuItemAction } from '@umbraco-cms/backoffice/menu';
export class MyMenuItemAction extends UmbMenuItemAction {
async execute() {
console.log('Menu item clicked!');
// Perform custom logic here
}
}
export default MyMenuItemAction;
export const manifests = [
{
type: "menuItem",
kind: "tree",
alias: "My.MenuItem.Tree",
name: "My Tree Menu Item",
meta: {
label: "Tree Structure",
icon: "icon-folder",
menus: ["Umb.Menu.Content"],
treeAlias: "My.Tree"
}
}
];
import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('my-menu-item')
export class MyMenuItemElement extends UmbLitElement {
#onClick() {
// Custom logic
}
render() {
return html`
<uui-menu-item
label="Custom Item"
@click="${this.#onClick}"
>
<uui-icon name="icon-wand"></uui-icon>
</uui-menu-item>
`;
}
}
export default MyMenuItemElement;
href property)api implementation)treeAlias property)"menuItem""link", "action", "tree")That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.