React Change Navbar Based on Page

Sometimes we need different navigation bars for different pages in our web application. For example, one type of menu on the blog of the website and another type of navigation menu on the shopping page of the website.

Different navbars for different pages are very handy on the website. Because the menu items can be shown to the user according to the page type. Which is most convenient for the user.

In today’s tutorial, we will see the technique of rendering different navbars for different pages.

Project Structure for the Change Navbar Based on Page in React

Here we have two folders for the navbar and pages inside the components folder. Within the Navbars folder, two navigation bar components are created. After that there are three page components are placed inside the Pages folder.

In this tutorial, we will render different page components for different links using React Router. And rendering specific navbar components will be rendered on specific links with the react-router.

This project uses React Router Dependencies. First, install React Router in your project. To install React Router, open a terminal in your project folder and execute the following command.

npm install react-router-dom

This command will install react-router dependencies in your react application.

Step 1: Create Navbar Components

In this react web app I want to show two types of navbar to the users based on the page. So I have created two navbar components. You can create two or more navbar components according to your project needs.

import { NavLink } from "react-router-dom";

function HomePageNavbar() {
  return (
    <div>
      <nav className="home-page-nav">
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/blog">Blog</NavLink>
        </li>
      </nav>
    </div>
  );
}

export default HomePageNavbar;

This is the default HomePageNavbar component.

import { NavLink } from "react-router-dom";

function BlogPageNavbar() {
  return (
    <div>
      <nav className="blog-page-nav">
        <li>
          <NavLink to="/">Home</NavLink>
        </li>
        <li>
          <NavLink to="/blog">Blog</NavLink>
        </li>
        <li>
          <NavLink to="/news">News</NavLink>
        </li>
      </nav>
    </div>
  );
}

export default BlogPageNavbar;

This is the BlogPageNavbar component. It will render when the users in the blog page.

In the above navbar components, we have used NavLink instead of React Router’s traditional Link. This is because NavLink helps the navbar to highlight the current page.

Step 2: Create Page Components

Let’s create some simple page components.

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
}

export default Home;

This is the Home page component.

function Blog() {
  return (
    <div>
      <h1>Blog Page</h1>
    </div>
  );
}

export default Blog;

This is the Blog page component.

function News() {
  return (
    <div>
      <h1>News Page</h1>
    </div>
  );
}

export default News;

This is the News page component.

The above three page components are created. Here only a heading with the name of the page is returned. You can customize the page according to your needs.

Since the purpose of this tutorial is to understand the fundamental concepts, that’s why everything is done in a basic way. Just try to understand the concept.

Step 3: Add Some CSS to The React App

* body {
  margin: 0;
  padding: 0;
}

.home-page-nav {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.home-page-nav li {
  list-style: none;
}

.home-page-nav li a {
  text-decoration: none;
  font-size: 30px;
  color: white;
}

.blog-page-nav {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.blog-page-nav li {
  list-style: none;
}

.blog-page-nav li a {
  text-decoration: none;
  font-size: 30px;
  color: white;
}

.active {
  font-weight: bold;
}

This is the App.css file.

Here are some basic styles in the navbar only. We have not designed any page components. Because that is not the main topic of this tutorial.

Final Step: Add All Components Together in the App Component

Now we will connect all the components of the page and navbar in the App.jsx file.

import { Route, Routes } from "react-router-dom";
import Home from "./components/Pages/Home";
import Blog from "./components/Pages/Blog";
import News from "./components/Pages/News";
import HomePageNavbar from "./components/Navbars/HomePageNavbar";
import BlogPageNavbar from "./components/Navbars/BlogPageNavbar";

function App() {
  return (
    <div>
      <Routes>
        <Route
          path="/"
          element={
            <div>
              <HomePageNavbar />
              <Home />
            </div>
          }
        />
        <Route
          path="/blog"
          element={
            <div>
              <BlogPageNavbar />
              <Blog />
            </div>
          }
        />
        <Route
          path="/news"
          element={
            <div>
              <BlogPageNavbar />
              <News />
            </div>
          }
        />
      </Routes>
    </div>
  );
}

export default App;

This is the App.jsx file.

In the above App.jsx file code, we have imported all page and navbar components.

After that, we have defined which component will be rendered on which link with the help of React Router.

Notice that within the <Route> tag we have instructed the navbar component to render before each page component. This means that when the user clicks, React Router will load the content of the navbar before loading the page’s content.

For example, in the above code, we have rendered the <BlogPageNavbar /> component at the beginning. After that <Blog /> page component will be rendered. As a result, users will see a different navbar when they are on the blog page.

Conclusion

So we learned a technique to show different navbars based on the page. Although this is a simple technique, you can easily use it for small projects. Practice it yourself a few times and it will all become very easy.

However, for larger and more complex projects, I would advise you to work with any state management tools like Context API and Redux. This will increase the efficiency of your project. Several tutorials on state management will be coming soon. Stay with KingsCoder!