---
/plugin marketplace add umbraco/Umbraco-CMS-Backoffice-Skills/plugin install umbraco-backoffice-skills@umbraco-skills-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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:
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.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.