I have simple Navbar like this:
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/`}>
Blah
</NavItem>
<NavItem eventKey={1} href={`${process.env.PUBLIC_URL}/SomePage`}>
SomePage
</NavItem>
</Nav>
</Navbar.Collapse>
When I put cursor on NavItem its highlited but I would like it to be highlighted after I click on it, to inform me where on page I am.
So: to sumuarize, anyone knows how to keep selected navitem highlighted?
I think firstly you need to be using unique event key for each NavItem.
Nav has a prop activeKey and a handler onSelect, make use of this to set the activekey on Nav.
<Nav activeKey={(this.state.activeKey)}
onSelect={e => {e.preventDefault(); this.handleSelect(e);}>
After this, you will get an active prop on the clicked active item, so now its the time for some CSS pseudo selector.
.NavItem:active{
background-color: green; //some color of your choice//
}
Related
Related to this question, whose top answers no longer work. By default, the NavDropdown only appears when clicked on, however I need this dropdown to display on hover. I struggled loading 'React-Bootstrap' into stackoverflow to create a reproducible example, however here is a basic Navbar using react-bootstrap, that features my attempt to display the dropdown on hover:
const [isStatsOpen, setIsStatsOpen] = useState(true);
<Navbar>
<Navbar.Brand>
<Link to='/'>
<img alt='company logo' src={My Logo} />
</Link>
</Navbar.Brand>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='mr-auto'>
<NavDropdown title='Statistics'
onMouseEnter={() => setIsStatsOpen(true)}
onMouseLeave={() => setIsStatsOpen(false)}
open={isStatsOpen}
>
<NavDropdown.Item as={Link} to='/stats/'> Stats 1</NavDropdown.Item>
<NavDropdown.Item as={Link} to='/stats2/'>Stats 2</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav className='ml-auto'>
<DivisionSelect />
<AppSelect />
</Nav>
</Navbar.Collapse >
</Navbar >
From the linked post above, there were 2 responses with 10+ votes, however neither of these solutions work. As it pointed out in one of the comments: This doesn't work in newer versions, the dropdown isn't rendered until it's first click. You'd need to trigger the onclick before you could control via css.
After inspecting the page, I can confirm that this person is correct - there is no menu for which to display until after the NavDropdown has been clicked upon. Once clicked, the menu is there, and then the solutions from this other post do work. Given this as the case, how can I resolve this issue? Is it possible for my react component to automatically "click" the Navdropdowns on load, that way the menus will appear on hover?
Thanks!
Does this help you? Old good vanilla javascript.
I added an id at NavDropdown and called the old, classic document.getElementById method and then triggered the click event.
useEffect(() => {
document.getElementById("test").click();
}, []);
<NavDropdown
id="test"
title="Statistics"
https://codesandbox.io/s/react-bootstrap-demo-z36c5
In this link to the earlier version of the question, the highly voted answer that starts with export class Nav extends React.Component { does work, so long as the open prop is updated to show.
I have navigation in my React app. However I would like the colour of navigation to change if on that page.
Heres my code Ive added an active className to the items.
<Link to='/'>
<li className='menu-list-item menu-list-logo active'>Gatsby's</li>
</Link>
<Link to='/drink'>
<li className='menu-list-item active'>Drink</li>
</Link>
<Link to='/food'>
<li className='menu-list-item active'>Food</li>
</Link>
<Link to='contact'>
<li className='menu-list-item active'>Contact</li>
</Link>
The navigation links currently have a background of black. I want the colour to change to lets say red.
P.S I'm using standard CSS for styles.
There is actually a property of activeClassName in NavLink of react router.
It goes like this
Import { NavLink } from 'react-router-dom`
...
<NavLink exact activeClassName="your_active_css_classname" className="normal_css">Link name </NavLink>
Don't forget to add exact. Read more here: https://reacttraining.com/react-router/web/api/NavLink
Light/Fast way to do this would be to change the class at the parent DOM element of these <Link> elements... from there the CSS would do what it works best.
Assuming these <Link> ... </Link> tags are enclosed inside a <nav> ... </nav> tag, which is the parent DOM element.
{ (onThePage) ? <nav className="onThePageClass"> ... </nav> : <nav className="normalClass"> ... </nav> }
Try this else share MVCE if you get stuck so that it serves as a good example for others looking for help
I'm using React + Redux for one of my applications. Where I want to have a Nav, with 2 Nav Items. I want to handle the change of Nav item based on the user action.
I'm planning to use my redux store to have a state for this to handle this change. Is this a good approach or please guide me for a better solution. I'm a beginner in this.
My Nav will look something like this
<Nav {...props} activeKey={active} onSelect={onSelect} style={styles} appearance="subtle" justified>
<Nav.Item eventKey="nav-1">
Nav 1
</Nav.Item>
<Nav.Item eventKey="nav-2" >
Nav 2
</Nav.Item>
</Nav>
(using rsuite js for this)
My initial state of the store will be something like this
const initialState = {
selectedNav: 'nav-1'
};
yes I think you are on the right way, but Nav 1 and Nav 2 does not have to know about the state the parent Component does
pass the redux state as props to the parent Nav and then render the selected Nav from the element props.
<Nav onSelect={onSelect} style={styles} appearance="subtle" justified>
{props.selectedNav === 'nav-1' && (
<Nav.Item eventKey="nav-1">
Nav 1
</Nav.Item>
)}
{props.selectedNav === 'nav-2' && (
<Nav.Item eventKey="nav-2" >
Nav 2
</Nav.Item>
)}
</Nav>
and make a global action for the user interaction to change the active nave.
Note:
you can take another approach for more cleaner code by wrapping the Nav 1 and Nav 2 into a switch component and render the active one.
I am using the react-bootstrap library to construct a nav bar at the top of my page using Navbar import. However, the bar seems to have some padding at the bottom which I do not want and can't seem to remove, as seen here (Yellow on bottom. Also navbar component does not seem to span the entire page [as seen by white space on either side of bar]; not sure of why this is either):
I would like the bar to span the page and have no padding on the bottom.
My render method is as follows:
render() {
if(Auth.isUserAuthenticated() && this.props.location.pathname === '/') {
return <div/>;
}
return (
<span className="nav-bar">
<Navbar inverse className="fixed-top collapseOnSelect nav-bar">
<Navbar.Collapse>
<Navbar.Header className="locl-link">
<Navbar.Brand>
<LinkContainer to="/">
<a>locl</a>
</LinkContainer>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<BootstrapNav>
<LinkContainer to="/about">
<NavItem active={this.linkActive("about")}>About</NavItem>
</LinkContainer>
</BootstrapNav>
<BootstrapNav pullRight>
{this.logInOut()}
</BootstrapNav>
</Navbar.Collapse>
</Navbar>
</span>
);
}
Any help would be greatly appreciated.
I didn't realise body tag has default margin; whoops
Just like #Zero wrote .navbar class has margin-bottom: 20px; property. You will need to override it or set margin-top: -20px; on element below if you want to keep it for some other view.
When it comes to padding at the right side - it's left for a vertical scroll bar. I have faced the same issue when I was using react-sidebar.
The space below navbar is coming from .navbar class in bootstrap.css. You can remove the margin-bottom: 20px; in bootstrap.css.
If you’re using bootstrap.css via CDN you can add style to your navbar, like so:
<Navbar style={{marginBottom: "0"}} inverse className="fixed-top collapseOnSelect nav-bar">
Regarding your problem with white space on either side or navbar. I think the problem is with how you render an element into the DOM. You should check the root DOM node in your HTML, maybe it has padding or margin. It could also be from the .nav-bar class in your span, or some other class.
I have a problem with the eventKey thing in NavDropdowns.
var Navigation = React.createClass({
handleSelect: function(eventKey){
console.log(eventKey);
},
render: function() {
return (
<Navbar brand='Navbar' toggleNavKey={0}>
<CollapsibleNav eventKey={0} onSelect={this.handleSelect}>
<Nav navbar>
<NavItem eventKey={1}>Home</NavItem>
</Nav>
<Nav navbar right hide>
<NavItem eventKey={2}>Login</NavItem>
<NavDropdown eventKey={3} title='NavDropdown' id='basic-nav-dropdown'>
<MenuItem eventKey={4}>Action 1</MenuItem>
<MenuItem eventKey={5}>Action 2</MenuItem>
</NavDropdown>
</Nav>
</CollapsibleNav>
</Navbar>
)
}
});
I want to be able in my selectHandler to tell what Nav element was clicked.
This works great for all elements except the NavDropdown:
Clicking the Dropdown does not trigger the selectHandler, which is fine.
But when I click one of the MenuItem, instead of giving me the eventKey, it gives me an event object.
How can I modify the NavDropdown so that it gives me the eventKey?
Edit: My versions are:
"react": "^0.14.0-beta3",
"react-bootstrap": "^0.25.100-react-pre.0",
It is a bug in react-bootstrap
https://github.com/react-bootstrap/react-bootstrap/issues/1268
The callback on onSelect event will receive 2 params. The first one is event obj. The second is EventKey. You can read it in doc. So if you want to get event key, you should try to call it in the second param
handleSelect: function(event,eventKey){
console.log(event)
console.log(eventKey);
},