Reputation: 1
I tried to place a simple dropdown menu in my navbar, but somehow it is not opening. I am very new to coding and webdev. With the imports it should normally work. I checked if Popper is installed.
Here is my component of the dropdown.
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
export default function Dropdown() {
return (
<div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs- toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul className="dropdown-menu">
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
);
}
And here my Navbar component:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import './Navbar.css';
import { NavLink } from 'react-router-dom';
import SignUp from './SignUp';
import Login from './Login';
import AuthContext from '../context/AuthProvider';
import { useContext } from 'react';
import DropdownUser from '../pages/DebtPage/DropdownUser';
export default function Navbar() {
const {auth} = useContext(AuthContext)
return (
<nav className="navbar navbar-expand-lg">
<div className="container-fluid justify-content-center">
<a className="navbar-brand" href="#">OweSmart</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="navbar-nav collapse navbar-collapse" id="navbarNavAltMarkup">
<NavLink to="/#" style={{ textDecoration: "none" }} className="nav-link">
<li className="nav-item">
Home
</li>
</NavLink>
<NavLink to="/ContactPage" style={{ textDecoration: "none" }} className="nav-link">
<li className="nav-item">
Contacts
</li>
</NavLink>
<NavLink to="/DebtPage" style={{ textDecoration: "none" }} className="nav-link">
<li className="nav-item">
Debts
</li>
</NavLink>
</div>
<DropdownUser></DropdownUser>
{auth.id ? (
<div className='username'>
{auth.username}
</div>
) : (
<div>
<Login></Login>
</div>
)
}
<div className='btn-nav'>
<SignUp
signupText="Sign Up"
customeButtonClass="btn-signup-navbar"
></SignUp>
</div>
</div>
</nav>
)
}
I tried to check if popper is installed, also manually setting EventListeners didnt work. Another user succeeded after adding ids to the button and the ul element, but this doesnt work for me:
<div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="collapse" aria-expanded="false" id="thing1" data-bs-target="thing2">
Dropdown button
</button>
<ul className="dropdown-menu" id="thing2" aria-labelledby="thing1">
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Upvotes: 0
Views: 35