Customize Navigation

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.

Additional Examples

• Hiding Navigation Menu Items