How To Add Back Button To Your React Navbar | Superflows | by Hrushi M

Published: 15 November 2022
on channel: Superflows
773
3

Hi Guys! Welcome to Superflows! I am Hrushi and in this video, I am going to show you how to add a back button to your Superflows react navigation bar.

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

Demo Project For Current Tutorial
https://stackblitz.com/edit/react-ts-...

Previous Videos:
Install the Superflows Navbar:    • How to Add a Navbar to Your React Pro...  
Set the Brand Info:    • How to Add Brand Info to Your React N...  
Customize the Menu:    • How to Customize the Menu of your Rea...  
Customize the Search Input:    • How To Customize the Search Input Of ...  
Customize the Sign In Button:    • How To Customize the SignIn Button Of...  
Insert User Profile Info:    • How To Insert User Profile Info In Re...  

Get In Touch via Discord
  / discord  

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

Related Demo 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, how to customise the menu, how to work with the search input and the sign in button and how to insert user profile information into the navbar.

Let us proceed forward now. If you want to see those videos again, I have added their links in the description.

By default, the menu button is shown and the back button is not shown. To show the back button, set the showBack prop to true. Please note that after the back button is displayed, the menu button is not shown. Only one of these two buttons can be shown at one time. Usually the back button on the navbar will be required on the inner screens, where the menu, search and sign in button may also not be required. You can remove them as well.

You can receive a callback after user presses the back button, after subscribing to the onBackPressed prop.
You can change the back icon by passing your own icon object to the backIcon prop. This example uses an icon from the React Bootstrap icon library. You can use any other icon library as well.

If you are interested in obtaining complete control over the look and feel, you already have it. You can completely override the base css properties of the back icon. Just use any of the back related style props for the same. An example is shown.

Thats it then! So in this video I have shown you how to add a back button to the Superflows react navigation bar.


Watch video How To Add Back Button To Your React Navbar | Superflows | by Hrushi M online without registration, duration hours minute second in high quality. This video was added by user Superflows 15 November 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 773 once and liked it 3 people.