I want different color on my nav when its in my homepage. How to check if the homepage route is active, than i want to give different styles on my navbar ? (if else statement). I've tried to use window.location.href. It works, but i have to refresh my page first.
$(function() {
if (window.location.href.indexOf("/") > -1) {
$('nav').addClass('nav-scroll');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<Navbar default collapseOnSelect fixedTop>
<Nav pullRight>
<Navbar.Brand>
<Link to="/">WakafKita</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Nav>
<Navbar.Collapse>
<Nav pullLeft>
<NavItem eventKey={1} componentClass={Link} href="/" to="/">
Beranda
</NavItem>
<NavItem eventKey={2} componentClass={Link} to="/menu">
Menu
</NavItem>
<NavItem eventKey={3} componentClass={Link} to="/menu">
Menu
</NavItem>
<NavDropdown eventKey={4} title="Akun" id="basic-nav-dropdown">
<MenuItem eventKey={4.1} componentClass={Link} href="/masuk" to="/masuk">Masuk</MenuItem>
<MenuItem eventKey={4.1} componentClass={Link} href="/daftar" to="/daftar">Daftar</MenuItem>
</NavDropdown>
</Nav>
<Navbar.Form className="navInput">
<form>
<FormGroup>
<InputGroup>
<InputGroup.Addon className="nbg">
<Glyphicon glyph="search" />
</InputGroup.Addon>
<FormControl type="text" placeholder="Cari Judul, Nama, atau Campaign" />
</InputGroup>
</FormGroup>
</form>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
If you are using react router version4, then you must be getting history as props and you can check the active route with the help of:
history.pathname
Or else you can go javascript way
window.location
If you are using react-router4 you should able to use Link component for navigation also this component includes props like activeClassName and activeStyle that help you to modify active mode.
for more information visit :
Active links tutorial
Related
I have a react-bootstrap navbar that has links to other pages. I want the nav-link of the page the user is in (active) to be underlined.
I add some css that works for nav items with the "href='#home'" (ashtag) but not with the real links.
<Nav defaultActiveKey={"/"} >
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link
href="/beafounder"
>
Be a founder
</Nav.Link>
<Nav.Link href="/portfolio" >Portfolio</Nav.Link>
</Nav>
<Navbar.Brand href="/">
<Logo />
</Navbar.Brand>
</Navbar.Collapse>
</div>
<div className="navDx">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home" >Team</Nav.Link>
<Nav.Link href="#link" >About Us</Nav.Link>
<Nav.Link href="#contacts">Contacts</Nav.Link>
</Nav>
I tried to add event keys to the nav link and change the defaultActiveKey but nothing, the nav item is underlined when i click it but the the active item remains the home.
.navbar-nav .nav-link.active {
border-bottom: 8px solid #D6FF0A !important;
}
The active link get a class "active" so you can target it with following selector:
.nav-link.active {
text-decoration: underline;
}
Add event keys to all your links. Create a state to hold the active link. onSelect of Nav set the state:
const [activeLink, setActiveLink] = React.useState("home");
return (
<Navbar>
<Nav
defaultActiveKey={activeLink}
onSelect={(selectedKey, event) => {
event.preventDefault();
console.log("selected key is: ", selectedKey);
setActiveLink(selectedKey);
}}
>
<Nav.Link href="/" eventKey="home">
Home
</Nav.Link>
<Nav.Link href="/beafounder" eventKey="beafounder">
Be a founder
</Nav.Link>
<Nav.Link href="/portfolio" eventKey="portfolio">
Portfolio
</Nav.Link>
</Nav>
</Navbar>
I haven't integrated any router solution, that's why I'm canceling the event on select.
Please look into following sandbox:
https://codesandbox.io/s/nifty-morning-mfcm5w
I have a simple react Navbar from bootstrap and I want to pass a userid from the navbar to a child.
I can do that working but when so, the child component is shown twice, once above the navbar and the second time below.
This happens only when I insert this command:
<UserConfig userid={this.state.user.userid} />
Here is a part of my App.js with the navigation
I tried many places to paste it in, but nothing worked
render() {
console.log(this.state.user.userid);
return (
<div className="App container" >
<UserConfig userid={this.state.user.userid} />
<Navbar fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">Hallo {jwt_decode(authentication.getAccessToken()).given_name}!</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<LinkContainer to="/config">
<NavItem >Konfiguration</NavItem>
</LinkContainer>
<LinkContainer to="/logout">
<NavItem>Logout</NavItem>
</LinkContainer>
<LinkContainer to="/callback">
<NavItem>Callback</NavItem>
</LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
<Routes />
</div>
);
}
In my UserConfig.js I just use this.props.userid which shows the value only when the navbar is crashed.....
Could you please help me to get that working?
Actually I just want to pass down the userid from App.js to UserConfig.js WITHOUT destroying my navigation.
UserConfig
render() {
console.log(this.props.userid);
return (
<div className="Login">
<form onSubmit={this.handleSubmit}>
<FormGroup controlId="hersteller" >
<ControlLabel >Hersteller</ControlLabel>
<FormControl
autoFocus
type="text"
value={this.state.hersteller}
onChange={this.handleChange}
/>
</FormGroup>
......
What is the correct way to pass props to NavItem
From this question... try this:
<LinkContainer to="/config">
<NavItem data-userid={this.state.userid} >Konfiguration</NavItem>
</LinkContainer>
I am assuming that is config page you are trying to get the value too? You can then remove the UserConfig component above the navigation (which should remove the double render).
I'm building a navbar that is expected to be responsive when it switches to mobile devices. In other words, collapse when mobile, then when the navitems are selected / clicked, it should route to the path and collapse all navitems to a toggle-style bar. However, below a snapshot of what I got and it's associated code:
CODE:
render() {
return (
!this.state.isAuthenticating &&
<div className="App">
<Navbar fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<LinkContainer to="/">
<a>
<img src={logo} alt="logo" height="70" width="75"/>
<p>hybriData</p>
</a>
</LinkContainer>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
{this.state.isAuthenticated
? <Fragment>
<LinkContainer to="/settings">
<NavItem>Settings</NavItem>
</LinkContainer>
<NavItem eventKey={1} onClick={this.handleLogout}>Logout</NavItem>
</Fragment>
: <Fragment>
<LinkContainer to="/About Us">
<NavItem eventKey={2}>About Us</NavItem>
</LinkContainer>
<LinkContainer to="/Contact">
<NavItem eventKey={3}>Contact</NavItem>
</LinkContainer>
<LinkContainer to="/works">
<NavItem eventKey={5}>Works</NavItem>
</LinkContainer>
<LinkContainer to="/signin">
<NavItem eventKey={6}>SignIn</NavItem>
</LinkContainer>
</Fragment>
}
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
I also integrated some of this solution react-bootstrap how to collapse menu when item is selected using the expanded and onSelect props of the navbar and nav's activeKey and onSelect props to achieve desired functionality but to no fruition. How can I implement desired functionality of having all navitem's collapsed when any path(s) is navigated to , clicked / selected? Thank you
Here is a simplified working example. It's about the order of items. If you look at the bootstrap CSS, you see some styles like
.nav > li {
position: relative;
display: block;
}}
The > symbol is a selector that selects all immediate descendants or children (first 'wrap layer' only, not applied to second 'wrap layer'), namely if you have
<ul class="nav">
<div>
<li>something</li>
<li>something</li>
</div>
</ul>
the styles are not applied, while
<ul class="nav">
<li>something</li>
<li>something</li>
</ul>
works. In your case, try replacing the <Fragment> with <Nav> and remove the outer <Nav>.
Another part you may want to modify is the LinkContainer wrapping the NavItem part. Usually we have <li> (NavItem) wrapping <a> (Link) but not the other way round.
Although react-bootstrap makes the code easier to read, it abstracts the details and may be harder to get something working. If you have difficulty with react-bootstrap, I suggest you to stick with pure bootstrap elements. The codes are slightly longer but the appearance is the same. You can follow w3schools to use bootstrap styles.
I'm using React Bootstrap and React Router Bootstrap for my Navbar, and I am making a user profile dropdown menu list.
I'd like to be able to have an user's avatar show up in place of the 'title' property. (The same idea as the user profile dropdown on Github)
Is this possible? I don't see any options to use an image instead of title for NavDropdown
<Navbar inverse>
<Navbar.Header>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavDropdown eventKey={ 3 } id="profile-dropdown" >
<LinkContainer to="/profile/edit" >
<NavItem eventKey={ 3.4 } > Edit </NavItem>
</LinkContainer>
<LinkContainer to="/logout">
<Logout eventKey={ 3.5 } />
</LinkContainer>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
Would a SplitButton or straight Dropdown be a better option? I don't really see much that the "NavDropdown" is adding to the HTML.
The NavDropdown's title property can take any React element as a value. This is what I did:
<Nav pullRight>
<NavDropdown eventKey={1}
title={
<div className="pull-left">
<img className="thumbnail-image"
src={src}
alt="user pic"
/>
{user.username}
</div>
}
id="basic-nav-dropdown">
<MenuItem eventKey={1.1} href="/profile">Profile</MenuItem>
<MenuItem divider />
<MenuItem eventKey={1.3}>
<i className="fa fa-sign-out"></i> Logout
</MenuItem>
</NavDropdown>
</Nav>
You'll probably need to adjust the css a little bit.
You can also use the <Image /> component, e.g.
const UserMenu = (
<Image
src={'https://github.com/mshaaban0.png'}
alt="UserName profile image"
roundedCircle
style={{ width: '40px' }}
/>
)
<NavDropdown id="nav-dropdown-dark-example" title={UserMenu}>
//....
</NavDropdown>
I'm beginner in react, so, need your help.
I used collapsible bootstrap navbar, have no ideas how to make it collapse after link click on mobile. Native bootsrap property collapseOnSelect not working, or i did something wrong.
const AppBar = () => (
<Navbar collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<div className="logo-wrap">
<Link to="define">
<img height='50' src='./../assets/img/logo.png' className="logo"/>
</Link>
</div>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<LinkContainer to="define" className="nav-link"><NavItem eventKey={1}>Home</NavItem></LinkContainer>
<LinkContainer to="about" className="nav-link"><NavItem eventKey={1}>About</NavItem></LinkContainer>
<LinkContainer to="features" className="nav-link"><NavItem eventKey={1}>Features</NavItem></LinkContainer>
<LinkContainer to="pricing" className="nav-link"><NavItem eventKey={1}>Pricing</NavItem></LinkContainer>
<LinkContainer to="areaMap" className="nav-link"><NavItem eventKey={1}>Area Map</NavItem></LinkContainer>
</Nav>
<Nav pullRight>
<LinkContainer to="login" className="nav-link"><NavItem eventKey={2}>Log In</NavItem></LinkContainer>
<LinkContainer to="registration"><NavItem eventKey={2}><Button className="sign-up">Sign Up</Button></NavItem></LinkContainer>
</Nav>
</Navbar.Collapse>
</Navbar>
);
export default AppBar;
const [expanded, setExpanded] = useState(false);
Second in the Navbar we add this prop:
<Navbar expanded={expanded}>
Third, we add an onClick event to the toggle handler that changes the menu visibility status:
<Navbar.Toggle onClick={() => setExpanded(expanded ? false : "expanded")} />
Fourth we add the prop
<Link to="/" onClick={() => setExpanded(false)}>Menu</Link>