Customizing a React Navbar Menu

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 , 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 straightforward. 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:

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 customize the look and feel, by using inline CSS or by class names. The Superflows navigation bar exposes props that facilitate customization. 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:

Reference Links

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 customize the menu. The next tutorial will show you how to use and customize 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 customize and style it.

Also Published