Closed Kylescottw closed 7 years ago
The SelectControl
is for meant for forms. What you probably want is to instrument a Navbar dropdown, which is built with an li
and nested ul
.
https://getbootstrap.com/docs/3.3/components/#navbar
You'll need to implement logic similar to expanding the Navbar menu when on mobile:
I've done this in another project. Here's a preview of what I do in the render method. Hopefully you can deduce the rest:
// ...
const menuClasses = ClassNames({
dropdown: true,
open: this.state.menuOpen
});
// ...
<li className={menuClasses}
onClick={this.toggleMenu.bind(this)}>
<a href="#">Menu <span className="caret"></span></a>
<ul className="dropdown-menu">
<li className={this.classForPath(/^\/admin\/foo/)}>
<Link to="/admin/foo">Foo</Link>
</li>
<li className={this.classForPath(/^\/admin\/bar/)}>
<Link to="/admin/bar">Bar</Link>
</li>
</ul>
</li>
I have it implemented but now when i click on the menu button, i don't get a drop down function
You'll have to work through it. Pay attention to which elements you need and what classes they need for a certain state and you should be good.
Hi Reza, Thank you for your patience with me!
I got it working :)
Hello, how exactly do I implement a solution for a drop-down within our navbar.jsx?
Please help, I've tried adding SelectControl, but I am having trouble making it look and work correctly as the original bootstrap navbar with a drop-down.
Thank you for your time, Kyle