Скачать или смотреть How to Customize the Menu of your React Navigation Bar | React JS | Navigation | Superflows

Hi Guys! Welcome to Superflows! I am Hrushi and in this video, I am going to show you, how to customize the main menu of your superflows react navigation bar.

Documentation:
https://superflows.dev/docs/building-...

Previous Videos:
Install the Superflows Navbar:    • How to Add a Navbar to Your React Project ...  
Set the Brand Info:    • How to Add Brand Info to Your React Naviga...  

Reference Code:
https://stackblitz.com/edit/react-ts-...

Get In Touch via Discord
  / discord  

More Tutorials
https://blog.superflows.dev/

Example Projects
https://stackblitz.com/@superflows-de...

In the previous tutorials, we saw how to get started with the default navbar, how to add branding information to it. Let us proceed forward now. If you want to see those videos again, I have added their links in the description.

Menu customization is very easy in Superflows. To set the menu simply pass a json array to the menu prop.

Let us start with a simple example of a menu with only 3 items. About Us, Contact Us, Blog. Create a JSON array as shown and pass it to the menu prop. You will see that the menu has now been populated. Confirm this in both the desktop and mobile view.

Say we want to add another menu item now with a submenu. Modify the JSON array with the new menu item as shown. You will see that the new menu item and its submenu, all have been populated.
To receive a callback after a click on any menu or submenu, subscribe to the onMenuClicked prop.

Further customization using inline css is also supported. Utilize the menu related style props. A simple example on how to do custom styling, is shown.