Back to Details

umbraco-menu

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Menu

Umbraco 菜单

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.
菜单是在Umbraco后台界面中随处可见的扩展组件，包括侧边栏和按钮下拉菜单。它们是一个或多个菜单项扩展的容器，可实现有序导航和操作分组。菜单项需单独配置，可添加到现有菜单或自定义菜单中。

Documentation

文档

Always fetch the latest docs before implementing:
在实现前，请务必获取最新文档：

Workflow

工作流程

  1. Fetch docs - Use WebFetch on the URLs above
  2. Ask questions - New menu or extend existing? What items? Where displayed?
  3. Generate files - Create manifest for menu + menu items based on latest docs
  4. Explain - Show what was created and how to test
  1. 获取文档 - 使用WebFetch访问上述URL
  2. 确认需求 - 是新建菜单还是扩展现有菜单？需要哪些菜单项？显示在何处？
  3. 生成文件 - 根据最新文档创建菜单及菜单项的清单文件
  4. 说明解释 - 展示创建的内容以及测试方法

Minimal Examples

最简示例

Custom Menu (umbraco-package.json)

自定义菜单（umbraco-package.json）

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

Menu Item for Custom Menu (manifest.ts)

自定义菜单的菜单项（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"
    }
  }
];
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)

扩展现有菜单（帮助菜单示例）

json
{
  "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"
  }
}
json
{
  "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"
  }
}

TypeScript Import (Help Menu)

TypeScript 导入（帮助菜单）

typescript
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"
  }
};
typescript
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"
  }
};

Common Built-in Menus

常见内置菜单

  • Umb.Menu.Help - Help menu in header
  • Umb.Menu.Content - Content section menu
  • Umb.Menu.Media - Media section menu
  • Umb.Menu.Settings - Settings section menu
  • Umb.Menu.Help - 头部的帮助菜单
  • Umb.Menu.Content - 内容区域菜单
  • Umb.Menu.Media - 媒体区域菜单
  • Umb.Menu.Settings - 设置区域菜单

Key Properties

关键属性

  • type: 
    "menu"
    for menu container, 
    "menuItem"
    for items
  • alias: Unique identifier
  • menus: Array of menu aliases this item should appear in
  • weight: Controls ordering (higher = later in list)
  • kind: Menu item type (
    "link"
    , 
    "default"
    , etc.)
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
  • type：菜单容器为
    "menu"
    ，菜单项为
    "menuItem"
  • alias：唯一标识符
  • menus：此菜单项应显示在其中的菜单别名数组
  • weight：控制排序（数值越高，在列表中越靠后）
  • kind：菜单项类型（
    "link"
    、
    "default"
    等）
就是这样！请始终获取最新文档，保持示例最简，生成可直接运行的完整代码。