umbraco-menu-items by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-menu-items菜单项是扩展组件,出现在 Umbraco 后台的侧边栏、按钮弹出菜单和其他位置。它们与菜单扩展协同工作,提供基于导航和操作的功能。菜单项有不同的种类(链接、操作、树形),可以使用默认组件或自定义元素。
在实现之前,请始终获取最新的文档:
Umbraco 源代码包含一个可运行的示例:
位置 : /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/menu-item/
此示例演示了不同种类的自定义菜单项。研究它以了解生产模式。
如果在实现菜单项时需要解释这些基础概念,请参考以下技能:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
Umbraco 元素 : 当实现自定义菜单项元素、解释 UmbLitElement 或创建菜单项组件时
umbraco-umbraco-element控制器 : 当实现 UmbMenuItemAction、操作逻辑、执行方法或菜单项行为时
umbraco-controllers上下文 API : 当实现上下文访问或从菜单项操作消费服务时
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!');
// 在此处执行自定义逻辑
}
}
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() {
// 自定义逻辑
}
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 属性)api 实现)treeAlias 属性)"menuItem""link", "action", "tree")就是这样!请始终获取最新的文档,保持示例简洁,生成完整可运行的代码。
每周安装次数
72
代码仓库
GitHub 星标数
14
首次出现
2026年2月4日
安全审计
安装于
github-copilot52
cursor25
opencode24
codex23
gemini-cli22
amp21
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.
Weekly Installs
72
Repository
GitHub Stars
14
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubWarnSocketPassSnykPass
Installed on
github-copilot52
cursor25
opencode24
codex23
gemini-cli22
amp21
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
120,000 周安装