You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 16/umbraco-cms/customizing/extending-overview/extension-types/menu.md
+95-60Lines changed: 95 additions & 60 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,78 +1,82 @@
1
-
# Menu
1
+
---
2
+
description: >-
3
+
Create menus that appear throughout the backoffice, in sidebars, button flyouts, and more.
4
+
---
2
5
3
-
{% hint style="warning" %}
4
-
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
5
-
{% endhint %}
6
+
# Menus
7
+
8
+
Menu extensions contain one or more menu item extensions and can be placed throughout the backoffice - in sidebars, flyouts, and more. This article will cover how to create a menu with custom menu items.
In this section, you can learn how to register and create a custom Menu for the Umbraco backoffice.
12
-
13
-
### Manifest
14
-
15
-
The manifest file can be created using either JSON or TypeScript. Both methods are shown below.
14
+
Menu extensions can be created using either JSON or TypeScript. Both approaches are shown below.
16
15
17
16
{% tabs %}
18
-
19
17
{% tab title="JSON" %}
20
-
21
-
We can create the manifest using JSON in the `umbraco-package.json`.
22
-
18
+
{% code title="umbraco-package.json" %}
23
19
```json
24
20
{
25
21
"type": "menu",
26
22
"alias": "My.Menu",
27
23
"name": "My Menu"
28
24
}
29
25
```
26
+
{% endcode %}
30
27
{% endtab %}
31
-
32
28
{% tab title="TypeScript" %}
29
+
Extension authors define the menu manifest, then register it dynamically/during runtime using a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point.md) extension.
33
30
34
-
The manifest can also be written in TypeScript.
35
-
36
-
For this TypeScript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point.md) extension to register the manifests.
In this section, you can learn how to add custom Menu Items to your Umbraco backoffice Menu.
71
+
Menu Item extensions can be created using either JSON or TypeScript. Both approaches are shown below.
63
72
64
73
### Manifest
65
74
66
75
To add custom menu items, you can define a single MenuItem manifest and link an element to it. In this element, you can fetch the data and render as many menu items as you want based on that data.
67
76
68
-
The code snippets below show how to declare a new menu item using JSON or TypeScript.
69
-
70
77
{% tabs %}
71
-
72
78
{% tab title="JSON" %}
73
-
74
-
We can create the manifest using JSON in the `umbraco-package.json`.
75
-
79
+
{% code title="umbraco-package.json" %}
76
80
```json
77
81
{
78
82
"type": "menuItem",
@@ -85,16 +89,18 @@ We can create the manifest using JSON in the `umbraco-package.json`.
85
89
}
86
90
}
87
91
```
88
-
92
+
{% hint style="info" %}
93
+
The `element` parameter is optional. Omitting it will render a menu item styled using Umbraco defaults.
94
+
{% endhint %}
95
+
{% endcode %}
89
96
{% endtab %}
90
-
91
97
{% tab title="TypeScript" %}
92
98
93
-
The manifest can also be written in TypeScript.
99
+
Extension authors define the menu manifest, then register it dynamically/during runtime using a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point.md) extension.
94
100
95
-
For this TypeScript example we used a [Backoffice Entry Point](../../extending-overview/extension-types/backoffice-entry-point.md) extension to register the manifests.
101
+
The `element` attribute will point toward a custom Lit component, an example of which will be in the next section of this article.
#### Rendering menu items with Umbraco's UI menu item component
139
+
{% hint style="info" %}
140
+
**Note:** Displaying menu item extensions does not require extension authors to create custom menu item subclasss. This step is optional.
141
+
{% endhint %}
122
142
123
-
To render your menu items in Umbraco, you can use the [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component allows you to create nested menu structures with a few lines of code.
143
+
To render your menu items in Umbraco, extension authors can use the [Umbraco UI Menu Item component](https://uui.umbraco.com/?path=/docs/uui-menu-item--docs). This component enables nested menu structures with a few lines of markup.
124
144
125
-
By default, you can set the `has-children` attribute to display the caret icon indicating nested items. It will look like this: `?has-children=${bool}`.
145
+
`<uui-menu-item>` nodes accept the `has-children`boolean attribute, which will display a caret icon indicating nested items. Tying this boolean attribute to a variable requires using the `?` Lit directive, which would look similar to this: `?has-children=${boolVariable}`.
126
146
127
147
**Example:**
128
148
129
-
```tsx
149
+
```html
130
150
<uui-menu-itemlabel="Menu Item 1"has-children>
131
151
<uui-menu-itemlabel="Nested Menu Item 1"></uui-menu-item>
132
152
<uui-menu-itemlabel="Nested Menu Item 2"></uui-menu-item>
133
153
</uui-menu-item>
134
154
```
135
155
136
-
####Custom menu item element example
156
+
### Custom menu item element example
137
157
138
-
You can fetch the data and render the menu items using the Lit element above. By putting the result of the fetch in a `@state()`, we can trigger a re-render of the component when the data is fetched.
158
+
Custom elements can fetch the data and render menu items using markup, like above. Storing the results of the fetch in a `@state()` variable will trigger a re-render of the component when the value of the variable changes.
0 commit comments