2,994 reads

Adding a Back Button to your React Navbar

by Hrushi MNovember 16th, 2022

Too Long; Didn't Read

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.

Company Mentioned

featured image - Adding a Back Button to your React Navbar

Introduction

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

Video Tutorial

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.