Admin Area > Extending Functionality
Customize Navigation
Learn how to customize menu items in the main navigation of the Admin app.
This feature is available since Webiny v5.40.0.
- how to customize navigation menu items
Overview
Webiny navigation consists of a three-level menu, and a single-level menu footer. In the following sections we show how you can add new menus, menu items, and also intercept the definition of every existing menu item.
Using the Code Examples
The following code examples follow our usual configuration pattern. You need to add the code from
the examples to your apps/admin/src/App.tsx
. We highly recommend using our Extensions to organize your code in a scalable and portable manner.
Add a New Menu and Menu Item
Let’s say you’re building a new app, and you want to add a new section to the existing Settings
menu. To achieve that, you need to reference the settings
menu by its name, and add child menu elements:
Following this example, you can add completely new menus for your apps, or add menu items to existing menus.
Add a Footer Menu Item
To add a menu item to the footer of the navigation, you need to tag it with a footer
tag. Optionally, you can pin it to the top or the bottom of the list by using the pin
prop.
Hide Menu Items
To hide menu items, we need to create a decorator for the AddMenu
component, which will allow us to intercept every <AddMenu>
element in the system, and decide what to do with it. This allows you not only to hide the menu, but also change labels, icons, etc.