Create React web page with 2 menus, one on top, the other on the left, using React Router v6

Create React web page with 2 menus, one on top, the other on the left, using React Router v6

In this article we will explain how to create a web page with a menu in the header (and additional menu on the left), content, and footer, using React, React Router v6, CSS grid and flex:

To get started, we will create a new React project using create-react-app. This will create a basic structure for our web page, including the necessary dependencies and configuration files.

Next, we will create three components for our header, content, and footer. These components will be responsible for rendering the content of each section of the web page.

The header component includes a menu with links to the different pages of our web page. We are using the Link component from the react-router-dom library to create the links, and the Route component to specify which component to render for each link.

To display the header, content, and footer on the web page, we will create a layout component that uses CSS grid and flex to arrange the three components in the desired layout.

As mentioned above, we have created our React app with npx create-react-app . and removed all the unnecessary files and imports.

We will need just these files: index.js, App.js, App.css.

index.js is just a boiler plate:

import React from 'react';
import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

And our main App.js looks like:

import './App.css';
import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function Header() {
  return (
    <header>
      <nav>
        <ul className="menu" style={{ display: 'flex', justifyContent: 'flex-end' }}>
          <li style={{ marginRight: '20px' }}>
            <Link to="/">Home</Link>
          </li>
          <li style={{ marginRight: '20px' }}>
            <Link to="/blog">Blog</Link>
          </li>
          <li style={{ marginRight: '20px' }}>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer>
      <p>Copyright tcoil.com {currentYear}</p>
    </footer>
  );
}

function LeftMenu() {
  return (
    <div className="left-menu">
    <nav>
      <ul>
        <li>
          <Link to="/page/1">Page 1</Link>
        </li>
        <li>
          <Link to="/page/2">Page 2</Link>
        </li>
        <li>
          <Link to="/page/3">Page 3</Link>
        </li>
      </ul>
    </nav>
    </div>
  );
}

function Home() {
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
      <p>This is the home page content.</p>
    </div>
  );
}

function Blog() {
  return (
    <div>
      <h1>Welcome to the Blog page!</h1>
      <p>This is the blog page content.</p>
    </div>
  );
}

function About() {
  return (
    <div>
      <h1>Welcome to the About page!</h1>
      <p>This is the about page content.</p>
    </div>
  );
}

function Page1() {
  return (
    <div>
      <h1>Welcome to the Page1 page!</h1>
      <p>This is the page1 content.</p>
    </div>
  );
}

function Page2() {
  return (
    <div>
      <h1>Welcome to the Page2 page!</h1>
      <p>This is the page2 content.</p>
    </div>
  );
}

function Page3() {
  return (
    <div>
      <h1>Welcome to the Page3 page!</h1>
      <p>This is the page3 content.</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <div style={{ display: 'grid', gridTemplateRows: 'auto 1fr auto', gridTemplateColumns: '300px 1fr', height: '100vh' }}>
        <LeftMenu />

        <div>
          <Header />
          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/blog" element={<Blog />} />
            <Route path="/about" element={<About />} />
            <Route path="/page/1" element={<Page1 />} />
            <Route path="/page/2" element={<Page2 />} />
            <Route path="/page/3" element={<Page3 />} />
          </Routes>
          <Footer />
        </div>

      </div>

    </Router>
  );
}

export default App;

To style the layout, we can add some CSS to the App.css file:

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }

  a {
    text-decoration: none;
    color: black;
  }

  .container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr;
    height: 100vh;
  }

  .menu {
    display: flex;
    justify-content: flex-end;
  }

  .menu li {
    margin-right: 20px;
  }

  header, footer {
    background-color: lightgray;
    padding: 20px;
  }

  footer {
    text-align: center;
  }

  .left-menu {
    background-color: lightgray;
    padding: 20px;
  }

  .left-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .left-menu li {
    margin-bottom: 10px;
  }

  .content {
    padding: 20px;
  }

This CSS code uses the grid layout to arrange the header, content, and footer in three rows, with the header and footer taking up a fixed amount of space and the content taking up the remaining space. The flex layout is used to arrange the menu items horizontally, with a margin between each item.

Finally, we can add some content to the home, blog, and about pages to complete our web page.

With these components and styles in place, we have a fully functional web page with a menu in the header, content, and footer, using React, React Router, and CSS grid and flex.

We hope this article was helpful in explaining how to create a web page with a menu in the header, content, and footer using React, React Router v6, CSS grid and flex.

Source