Last updated
Was this helpful?
Last updated
Was this helpful?
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.
In this section, you can learn how to register and create a custom Menu for the Umbraco backoffice.
The manifest file can be created using either JSON or TypeScript. Both methods are shown below.
We can create the manifest using JSON in the umbraco-package.json.
Menu items are the items that appear in the menu.
In this section, you can learn how to add custom Menu Items to your Umbraco backoffice Menu.
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.
The code snippets below show how to declare a new menu item using JSON or TypeScript.
We can create the manifest using JSON in the umbraco-package.json.
Rendering menu items with Umbraco's UI menu item component
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}.
Example:
Custom menu item element example
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.
Default Element
The backoffice comes with a couple of menus.
Content, Media, Settings, Templating, Dictionary, etc.
To add a menu item to an existing menu, you can use the meta.menus property.
For this TypeScript example we used a extension to register the manifests.
For this TypeScript example we used a extension to register the manifests.
To render your menu items in Umbraco, you can use the . This component allows you to create nested menu structures with a few lines of code.
