How to Customize the Menu of Your React Navbar

How to Customize the Menu of Your React Navbar

2 minute tutorial

·

3 min read

Play this article

Introduction

This article shows you how to set the main menu of the react navigation bar. It shows you how to configure the menu and then how to style it.

Prerequisites

This article assumes that you have gone through the steps of the previous tutorial, installed the Superflows library, have the default navigation bar up and running and then have added your brand information. This tutorial takes it forward from there.

Step 1 - Customise the Menu

Setting the menu is pretty straight forward. Compose the requisite json object and set it to the menu prop. I am showing an example here.


return (
  <div>
    <SfNav 
      brand="Your Brand" 
      menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}/>
  </div>
);

It renders as follows:

brand_menu_desktop.png

brand_menu_mobile.png

Step 2 - Handle the callback

The navbar provides a callback after any of the menus or submenus are clicked. Subscribe to it to receive the callback events. As shown below:


return (
  <div>
    <SfNav 
      brand="Your Brand" 
      menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}
      onMenuClicked={(value) => {alert(value)}}
    />
  </div>
);

Step 3 - Styling

You can then customise the look and feel, by using inline css or by class names. The Superflows navigation bar exposes props that facilitate customisation. An example is shown below:


return (
  <div>
    <SfNav 
      brand="Your Brand" 
      menu={[{caption: "About", link: "about"}, [{caption: "Solutions", link: "solutions"}, {caption: "Products", link: "products"}, {caption: "Services", link: "services"}], [{caption: "Contact", link: "contact"}, {caption: 'Instagram', link: "instagram"}]]}
      onMenuClicked={(value) => {alert(value)}}
      stylesMenu={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px'}} 
      stylesSubMenu={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', border: 'solid 1px gray'}}
      stylesMenuMobile={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
      stylesMenuMobileSelected={{backgroundColor: 'white', color: 'black', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
      stylesSubMenuMobile={{backgroundColor: 'black', color: 'white', paddingLeft: '5px', paddingRight: '5px', borderRadius: '5px', border: 'solid 1px gray'}}
                />
  </div>
);

It renders as follows:

brand_menu_customize_desktop.png

brand_menu_customize_mobile.png

Video Tutorial

Further Reading

You have already seen how to get started with the navigation bar, how to insert brand information into it and now, how to customise the menu. The next tutorial will show you how to use and customise the search input.

Conclusion

This article shows you how to configure the main menu using a json object. Further how to handle menu click callbacks and lastly, how to customise and style it.