// src/components/nav/Menu.js
import { NavLink } from "react-router-dom";

export default function Menu() {
  return (
    <ul className="nav d-flex justify-content-between p-2 lead">
      <li>
        <NavLink className="nav-link" to="/">
          Home
        </NavLink>
      </li>
      <li>
        <NavLink className="nav-link" to="/login">
          Login
        </NavLink>
      </li>
      <li>
        <NavLink className="nav-link" to="/register">
          Register
        </NavLink>
      </li>

      <div className="dropdown">
        <li>
          <a
            className="nav-link pointer dropdown-toggle"
            data-bs-toggle="dropdown"
          >
            User
          </a>
          <ul className="dropdown-menu">
            <li>
              <NavLink className="nav-link" to={`/dashboard`}>
                Dashboard
              </NavLink>
            </li>
            <li>
              <a className="nav-link">Logout</a>
            </li>
          </ul>
        </li>
      </div>
    </ul>
  );
}

Import and use in App

import Menu from "./components/nav/Menu";

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <Menu />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/register" element={<Register />} />
          <Route path="/login" element={<Login />} />
        </Routes>
      </AuthProvider>
    </BrowserRouter>
  );
}

To make the dropdown menu work, include bootstrap.js CDN link in public/index.html

<script
   src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
   integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
   crossorigin="anonymous"
></script>

To make the logout link show pointer on hover use your own pointer className

<a className="nav-link pointer">Logout</a>

// index.css
.pointer {
  cursor: pointer;
}

.active {
  color: white;
  background: #2196f3;
}