How to Add a Back Button to your React Navbar

How to Add a Back Button to your React Navbar

3 Minute Tutorial

Hrushi M's photo
Hrushi M
·

3 min read

Table of contents

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>
    );
}

back.png

back_mobile.png

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>
    );
}

back_icon.png

back_icon_mobile.png

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>
    );
}

back_style.png

back_style_mobile.png

Documentation

This link

Example Project For This Tutorial

This link

Previous Tutorials of Navbar

YouTube Channel

This link

Discord Community

This link

Example Projects Collection

This link

Video Tutorial

https://www.youtube.com/watch?v=r8VIwvYWOCU

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.

ReactWeb DevelopmentBeginner DevelopersTutorialsuperflows