Introduction
This article shows you how to add a back button to your react navbar. It shows you how to show / hide the back button, how to change its icon, how to handle the callback and then how to do further styling.
Prerequisites
This article assumes that you have read the previous navbar tutorials. In case you haven't you will find a consolidated list in the reference links section. This article assumes that you have installed the Superflows library, have the default navigation bar up and running, have added your brand information, have also customised your menu, have added the search input, have configured the sign in button and have also understood how to insert user profile information into the navbar. This tutorial takes it forward from there.
Step 1 - Display the Back Button
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.
function Apps(props) {
return (
<div>
<div>
<SfNav
showBack={true}
menu={[]}
showSearch={false}
showSignIn={false}
/>
</div>
</div>
);
}
It renders as follows:
Step 2 - Change the Icon
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.
import {ArrowLeft} from 'react-bootstrap-icons'
function Apps(props) {
return (
<div>
<div>
<SfNav
showBack={true}
menu={[]}
showSearch={false}
showSignIn={false}
backIcon={<ArrowLeft style={{paddingTop: '5px'}} />}
/>
</div>
</div>
);
}
It renders as follows:
Step 3 - Handle the Button Press Callback
You can receive a callback after user presses the back button, after subscribing to the onBackPressed prop.
function Apps(props) {
return (
<div>
<div>
<SfNav
showBack={true}
onBackPressed={() => {alert('back pressed');}}
menu={[]} '
showSearch={false}
showSignIn={false}
/>
</div>
</div>
);
}
Step 4 - Styling
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. An example is show below:
function Apps(props) {
return (
<div>
<div>
<SfNav
showBack={true}
onBackPressed={() => {alert('back pressed');}}
menu={[]}
showSearch={false}
showSignIn={false}
stylesBack={{backgroundColor: 'black', color: 'white', padding: '0px', width: '20px', height: '20px', textAlign: 'center', lineHeight: '1.1', borderRadius: '10px', marginRight: '10px'}}
/>
</div>
</div>
);
}
It renders as follows:
Reference Links
Documentation
Example Project For This Tutorial
Previous Tutorials of Navbar
- T1: Getting Started With Navbar
- T2: Insert Brand Info
- T3: Customise Menu
- T4: Add Search Functionality
- T5: Add Sign In Button
- T6: Add User Profile Info
YouTube Channel
Discord Community
Example Projects Collection
Video Tutorial
Further Reading
You have already seen how to get started with the navigation bar, how to insert brand information into it, how to customise the menu and now, how to configure the search input, how to use the sign in button, how to insert profile information into it and now, how to add a back button.
Conclusion
This article shows you how to add back button into your react navigation bar, how to change the back icon, how to handle its callback and how to style it.
Top comments (0)