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>
    );
} 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>
    );
} 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>
    );
} Reference Links Documentation This link Example Project For This Tutorial This link 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: Insert User Profile Info YouTube Channel This link Discord Community This link Example Projects Collection This link Video Tutorial https://www.youtube.com/watch?v=r8VIwvYWOCU?embedable=true 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. Also published . here

This story contains new, firsthand information uncovered by the writer.

YouTube

How to Add  Notifications to your React Navigation bar

Adding a Back Button to your React Navbar

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Adding a 'Sign In' Button to your React Navbar

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Adding a 'Sign In' Button to your React Navbar

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps