I have a side bar. It contains Menus. Each Menu has sub menus.
Home
Menu1 ->1.submenu1
->submenu2
Menu2 -> sub1
-> sub2
On selecting the Menu, it should be in active(color:blue). Under that menu1, If we select submenu1 then its color should also be changed. On navigating to submenu1, Sidebar's submenu should not be closed. It should be opened. I have tried with different solutions, but couldn't fix. Please help me to resolve this issue. Thanks in advance..
<aside className="main-sidebar sidebar-dark-primary elevation-4">
<div className="sidebar">
<nav>
<ul className="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li className="nav-item">
<Link to="/home" className="nav-link active">
<i className="nav-icon fa fa-tachometer"></i>
<p>
Home
</p>
</Link>
</li>
<li className="nav-item has-treeview ">
<Link to="#" className="nav-link">
<i className="nav-icon fa fa-copy"></i>
<p>Menu1 <i className="fa fa-angle-left right"></i>
</p>
</Link>
<ul className="nav nav-treeview">
<li className="nav-item">
<Link to="/submenu1" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Submenu1</p>
</a>
</li>
<li className="nav-item">
<Link to="/submenu2" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Submenu2</p>
</a>
</li>
</ul>
</li>
<li className="nav-item has-treeview">
<Link to="#" className="nav-link">
<i className="nav-icon fa fa-book"></i>
<p>Menu2 <i className="fa fa-angle-left right"></i>
</p>
</Link>
<ul className="nav nav-treeview">
<li className="nav-item">
<Link to="/sub1" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Sub1</p>
</Link>
</li>
<li className="nav-item">
<Link to="/sub2" className="nav-link">
<i className="fa fa-circle nav-icon"></i>
<p>Sub2</p>
</Link>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</aside>
In React js, there are two components to navigate to a route:
<NavLink> and <Link>.
<Link> provides accessible navigation to your react application.
<NavLink> provides styling attributes to the rendered element if matches to the URL alongwith navigation. Some of the styling attributes are activeClassName:String and activeStyle:Object.
Example of activeClassName attribute:
<NavLink to="/" exact activeClassName="selected">Home</NavLink>
<NavLink to="/about" activeClassName="selected">About</NavLink>
And in CSS,
.selected {
fontWeight: "bold",
color: "red"
}
Example of activeStyle:
<NavLink to="/" exact activeStyles={{fontWeight: "bold", color: "red"}}>
Home
</NavLink>
Related
My version of Bootstrap is 5.2.
navbar.jsx
import React, { Component } from "react";
import { NavLink, Link } from "react-router-dom";
class Navbar extends Component {
state = {};
render() {
return (
<nav className="navbar navbar-dark mb-2 navbar-expand-lg bg-dark">
<div className="container">
<Link className="navbar-brand" to="#">
Vidly
</Link>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon" />
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ms-auto">
<li className="nav-item">
<NavLink className="nav-link" aria-current="page" to="/movies">
Movies
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/rentals">
Rentals
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/customers">
Customers
</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/login">
Login
</NavLink>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default Navbar;
Above is my code here on top navbar-toggle is not working.
I tried more things and read more documents about it but I'm unable to find a solution - kindly need your help.
Thanks in advance <3
I think "bootstrap" and "react-bootstrap" are different.
you can refer to this link
https://react-bootstrap.github.io
I have this bootstrap NavBar that works perfectly with "a", but when I try to replace the "a" with "Link" from React it pretty much breaks the app, the Navbar stops showing. Is it because of the Bootstrap? I saw a video from youtube that this works, maybe with newer versions this doesn't work?
import React from "react";
import { Link } from "react-router-dom";
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">
<div>
<img width="100" src="/assets/images/logo.jpg"></img>
</div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" to="/">Home</Link> <----------------here for ex.
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Productos
</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Nosotros
</a>
</li>
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Contacto
</a>
</li>
</ul>
</div>
</div>
</nav>
Judging from the href attribute in your <a> components, I believe you are trying to access a component on the same page using hashes.
Link from react-router-dom does not actually support this feature from what I know. Instead, I suggest installing react-router-hash-link which supports it.
The import can look like
import { HashLink as Link } from 'react-router-hash-link';
And you can have the same component attributes
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/#productos">
Productos
</Link>
</li>
You need to enclose your <NavLink/>, <Link/>, <Routes/> and <Route/> components with a Router like <BrowserRouter/>.
So in App.js or another top level component, you need to do it like this:
const App = (props) => {
<BrowserRouter>
<Your sidebar component including NavLink elements/>
<Your app module including Route elements/>
</BrowserRouter>
}
Is use the adminlte template for react. (not the react version) I am struggle to get the sidebar right. The problem is I cannot get the a href right. See example
<li className="treeview">
<a href="#!">
<i className="fa fa-user" />
<span>Hoofdtrainer</span>
<span className="pull-right-container">
<i className="fa fa-angle-left pull-right" />
</span>
</a>
<ul className="treeview-menu">
<li>
<Link to="/admin/trainingen">
<i className="fa fa-book" />
<span>Trainersgroepen</span>
</Link>
</li>
<li>
<Link to="/admin/trainingen/cursisten">
<i className="fa fa-book" />
<span>Cursisten</span>
</Link>
</li>
Is there a way to active the treeview by the react-router? Or is er a way to change the href value
The NavLink of react router does not route to the appropriate page when the Navlink reside in the dropdown.
Below the Html struture tried to implement in React
<BrowserRouter>
<header className="menubar">
<nav className="navbar navbar-expand-sm">
<button className="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="menu">
<ul className="navbar-nav">
<li className="nav-item">
<div className="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="loanlink">
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className="dropdown-menu dropdown-menu-center" aria-labelledby="loanlink">
<div className="menuPointer"></div>
<NavLink className="dropdown-item" to="/loan">
<div className="menuContent">
<span className="menuTitle">Manage Loan</span>
</div>
</NavLink>
</div>
</div>
</li>
<li className="nav-item">
<NavLink className="nav-link dropdown-toggle" to="/revenue" >
<span className="menuTitle">Revenue</span>
</NavLink>
</li>
</ul>
</div>
</nav>
</header>
</BrowserRouter>
In the above code, the "revenue" link which is not dropdown-menu is working fine, but the links which are inside dropdown-menu is not working.
I think the dropdown toggle event prevents the react router navigation.
Am using React router and Bootstrap 4 (not reactstrap)
This is a late answer, but the problem is that Bootstrap's data-toggle for the Dropdown is preventing the route from working.
You can solve it by toggling the Dropdown using React state, instead of using the data-toggle behavior in Bootstrap.
<li className="nav-item">
<div className="dropdown" display="static" onClick={this.handleClick}>
<a href="#!" className="nav-link dropdown-toggle">
<span className="menuTitle">Loan</span>
</a>
<div className={this.state.showDD?'dropdown-menu show':'dropdown-menu'}>
<NavLink className="dropdown-item" to="/loan">
<span>Manage Loan</span>
</NavLink>
</div>
</div>
</li>
https://codeply.com/p/auvCgEmeiD
I don't get it react throws me this error: Expected corresponding JSX closing tag for <li> Because everything is closed well and it is only when I have multiple li elements
render() {
return (
<nav className="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul className="nav sidebar-nav">
<li>
<a href="#" className="active">
<i className="fa fa-home"></i>Home
</a>
</li>
<li>
<a className="collapsible-header waves-effect arrow-r">
<i className="fa fa-user"></i> About me<i className="fa fa-angle-down rotate-icon"></i>
</a>
<li>
</ul>
</nav>
);
}
Can anybody help me out on this?
You are missing a slash in the second closing li:
<li>
<a className="collapsible-header waves-effect arrow-r">
<i className="fa fa-user"></i> About me<i className="fa fa-angle-down rotate-icon"></i>
</a>
</li>