How to create a Bottom menu navigation bar in React for Mobile

Hey, are you a React developer? and you are searching for How to create a Bottom menu navigation bar in React! If Yes, Then you are in the right place to know How to create it in Step by step.

Creating a bottom navigation bar in React for a mobile-friendly application involves several steps. Below is a step-by-step guide on achieving this using React, along with some basic styling.

Step 1: Set Up Your React Project

If you haven’t already set up a React project, you can do so by running:

npx create-react-app my-bottom-nav-app
cd my-bottom-nav-app

Step 2: Install Necessary Packages

You might want to use react-router-dom for navigation between different pages or components.

npm install react-router-dom

Creating a bottom navigation bar in React for a mobile-friendly application involves several steps. Below is a step-by-step guide on how to achieve this using React, along with some basic styling.

Step 1: Set Up Your React Project

If you haven’t already set up a React project, you can do so by running:

bash

npx create-react-app my-bottom-nav-app
cd my-bottom-nav-app

Step 2: Install Necessary Packages

You might want to use react-router-dom for navigation between different pages or components.

bash

npm install react-router-dom

Step 3: Create the Bottom Navigation Bar Component

Create a new file BottomNavBar.js in your src directory.

import React from 'react';
import { Link } from 'react-router-dom';
import './BottomNavBar.css'; // We'll create this file for styling

const BottomNavBar = () => {
  return (
    <div className="bottom-nav">
      <Link to="/" className="nav-item">
        <i className="fas fa-home"></i>
        <span>Home</span>
      </Link>
      <Link to="/search" className="nav-item">
        <i className="fas fa-search"></i>
        <span>Search</span>
      </Link>
      <Link to="/profile" className="nav-item">
        <i className="fas fa-user"></i>
        <span>Profile</span>
      </Link>
    </div>
  );
}

export default BottomNavBar;

Step 4: Add Some Styling

Create a BottomNavBar.css file in the src directory.

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  z-index: 1000;
}

.nav-item {
  text-align: center;
  flex-grow: 1;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.nav-item i {
  font-size: 24px;
  margin-bottom: 4px;
  display: block;
}

.nav-item span {
  font-size: 12px;
}

Step 5: Set Up Routing

To navigate between different pages, set up routing in your App.js.

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import BottomNavBar from './BottomNavBar';

const Home = () => <div>Home Page</div>;
const Search = () => <div>Search Page</div>;
const Profile = () => <div>Profile Page</div>;

function App() {
  return (
    <Router>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/search" element={<Search />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
        <BottomNavBar />
      </div>
    </Router>
  );
}

export default App;

Step 6: Test and Run the Application

Now that everything is set up, run your application to see the bottom navigation bar in action.

npm start

Optional: Add Icons

The icons used in this guide are from Font Awesome. You can add Font Awesome to your project by adding the following line to the index.html file in the public folder:

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>

Step 7: Make It Mobile Friendly

The provided CSS is designed to work well on mobile devices, but you can further tweak it using media queries if needed.

Bonus Step

This guide walked you through creating a simple bottom navigation bar in React, suitable for mobile applications. You can expand this by adding more functionality, such as active link highlighting, custom animations, and more complex layouts.