Nav Bar

Below is a simple example of how you could make a navigational bar in React using react-router-dom. We’ll create 3 simple pages: Home, About, and Contact.

Firstly, install react-router-dom if you haven’t done so:

npm install react-router-dom

Then, start by creating the pages:

Home.js

import React from 'react';

const Home = () => (
  <div>
    <h1>Home</h1>
    <p>This is the home page</p>
  </div>
);

export default Home;

About.js

import React from 'react';

const About = () => (
  <div>
    <h1>About</h1>
    <p>This is the about page</p>
  </div>
);

export default About;

Contact.js

import React from 'react';

const Contact = () => (
  <div>
    <h1>Contact</h1>
    <p>This is the contact page</p>
  </div>
);

export default Contact;

Then create a Navbar component:

Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => (
  <nav>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
  </nav>
);

export default Navbar;

Finally, set up the routes in your main component:

App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => (
  <Router>
    <Navbar />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  </Router>
);

export default App;

This will create a basic navigation bar with 3 links to the Home, About, and Contact pages. Clicking on these links will change the URL, and the Routes component will render the associated component.

BONUS TIME, some css ;)

Here’s some CSS that will give your navbar a modern and stylish look. This will create a horizontal navigation bar with some hover effects.

First, create a Navbar.css file:

Navbar.css

nav {
  background-color: #333;
  overflow: hidden;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
}

nav ul li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #ddd;
  color: black;
}

Then, import this CSS file into your Navbar.js:

Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

const Navbar = () => (
  <nav>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
  </nav>
);

export default Navbar;

This gives your navbar a dark background with light text, and changes the color of the text and background on hover. The float: left; on the list items causes them to lay out horizontally. You can, of course, tweak these styles to suit your design.

Please note that CSS might look slightly different based on your project’s configuration or your personal preference. Adjust it accordingly.

Bonus Drop

To do this we would want to use the useEffect hook from React. This hook allows you to perform side effects in function components. If you want to delay the drop down by .5 seconds (500 milliseconds) after the page is loaded, you could do something like this:

Navbar.js

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import './Navbar.css';

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);

  // The useEffect hook with empty dependencies array will run once after the initial render
  useEffect(() => {
    // The setTimeout function will delay the opening of the navigation bar by 0.5 seconds
    const timer = setTimeout(() => {
      setIsOpen(true);
    }, 500); // 500ms delay

    // Clear the timeout if the component is unmounted before the timeout finishes
    return () => clearTimeout(timer);
  }, []); // Empty dependency array so the effect only runs once on mount

  return (
    <nav className={isOpen ? 'open' : ''}>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
};

export default Navbar;

The CSS to make the dropdown effect looks like this:

Navbar.css

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #333;
  transform: translateY(-100%);
  transition: transform 0.5s ease-in-out;
  overflow: hidden;
}

nav.open {
  transform: translateY(0);
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

nav ul li {
  padding: 20px 0;
}

nav ul li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 2em;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #ddd;
}

In this setup, the navigation bar starts off the screen (transform: translateY(-100%);). After 0.5 seconds, setIsOpen(true) is called, changing the isOpen state to true, which adds the open class to the nav element (className={isOpen ? 'open' : ''}). This overwrites the transform to translateY(0), bringing the navigation bar onto the screen. The transition: transform 0.5s ease-in-out; property makes this change animate smoothly.

This creates a stylish dropdown effect for the navigation bar that triggers 0.5 seconds after the page is loaded.

Have a Super Fun Time With Your NAV

Creating a Nav Bar.

BONUS TIME, some css ;)

Bonus Drop