// 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;
}