I have the following code nested within my Navbar :
<Navbar inverse collapseOnSelect fixedTop fluid>
<Navbar.Collapse>
<Nav onSelect={this.props.onSelect} pullRight>
<NavItem eventKey={'navItem1'}>NavItem 1</NavItem>
<NavItem eventKey={'navItem2'}>NavItem 2</NavItem>
<NavDropdown eventKey={'dropdown1'} title="Dropdown1" id="basic-nav-dropdown">
<MenuItem eventKey={'placeholder1'}>Placeholder</MenuItem>
<MenuItem divider />
<MenuItem eventKey={'placeholder2'}>Placeholder</MenuItem>
</NavDropdown>
<NavDropdown eventKey={'dropdown2'} title="Dropdown2" id="basic-nav-dropdown-2">
<MenuItem eventKey={'placeholder3'}>Placeholder</MenuItem>
<MenuItem divider />
<MenuItem eventKey={'placeholder4'}>Placeholder</MenuItem>
</NavDropdown>
<NavDropdown eventKey={'dropdown3'} title="DropDown3" id="basic-nav-dropdown-3">
<MenuItem eventKey={'placeholder5'}>Placeholder</MenuItem>
<MenuItem divider />
<MenuItem eventKey={'placeholder6'}>Placeholder</MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
The problem I am facing is that only Dropdown1 shows the dropdown. When looking at the issue using my ChromeTools, it seems that the other two dropdowns are not having the "open" class added to them.
Any advice?
Your NavDropdown components themselves don't have event keys, they just have a title and an id value. It should be like this:
<NavItem eventKey={1}>NavItem 1</NavItem>
<NavItem eventKey={2}>NavItem 2</NavItem>
<NavDropdown eventKey={3} title="Dropdown1" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Placeholder</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.2}>Placeholder</MenuItem>
</NavDropdown>
<NavDropdown eventKey={4} title="Dropdown2" id="basic-nav-dropdown-2">
<MenuItem eventKey={4.1}>Placeholder</MenuItem>
<MenuItem divider />
<MenuItem eventKey={4.2}>Placeholder</MenuItem>
</NavDropdown>
Related
My goal is to have a standard topnav on large and greater breakpoints, then on smaller/mobile screens, to use an offcanvas instead while hiding the normal topnav links. However, when I use the two together, the hamburger button triggers both the collapse and the offcanvas, even though the aria-label is set to the offcanvas id (I understand this is just an accessibility label)
How can I tell it to only trigger the offcanvas and just ignore the collapse?
Alternatively, I want the collapse to come in from the side, like the offcanvas does, rather than the top.
Here's my code, as basic as it is:
import React from 'react'
import { Container, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap';
const NavLinks = () => (
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">Another action</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">Something else here</NavDropdown.Item>
</NavDropdown>
</Nav>
);
const Header = () => {
return (
<Navbar bg="light" expand="lg">
<Container fluid>
<Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
<Navbar.Collapse>
<NavLinks />
</Navbar.Collapse>
<Navbar.Toggle aria-controls="offcanvasNavbar" />
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end">
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
Offcanvas
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<NavLinks />
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
);
}
export default Header
I'm currently trying to implement an offcanvas style navbar using react-boostrap, and am trying to make it responsive so that menu icon disappears and the contents are displayed on the nav bar itself when the screen reaches above a certain size.
I used the example from their site but have changed the value of the expand property and added a collapse component: https://react-bootstrap.netlify.app/components/navbar/#navbar-offcanvas
import {
Navbar,
Container,
Offcanvas,
NavDropdown,
Form,
FormControl,
Button,
Nav,
} from "react-bootstrap";
const Navigation = () => {
return (
<Navbar bg="light" expand="1g" collapseOnSelect>
<Container fluid>
<Navbar.Brand href="#">Navbar Offcanvas</Navbar.Brand>
<Navbar.Toggle aria-controls="offcanvasNavbar" />
<Navbar.Collapse id="offcanvasNavbar">
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
Offcanvas
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
The menu icon should disappear and the contents expand onto the navbar at 992 horizontal res, but nothing changes.
I also tried to use a normal navbar from their examples, but then replace the body with an offcanvas body like so:
<Navbar collapseOnSelect expand="lg" bg="light">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Navbar.Offcanvas
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
Offcanvas
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<Nav.Link href="#action1">Home</Nav.Link>
<Nav.Link href="#action2">Link</Nav.Link>
<NavDropdown title="Dropdown" id="offcanvasNavbarDropdown">
<NavDropdown.Item href="#action3">Action</NavDropdown.Item>
<NavDropdown.Item href="#action4">
Another action
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action5">
Something else here
</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
/>
<Button variant="outline-success">Search</Button>
</Form>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Navbar.Collapse>
</Container>
</Navbar>
And while this did actually make the icon disappear correctly, none of the menu's contents would appear onto the bar as they are supposed to.
I've been taking bits out and putting bits in for long enough now that I could have probably created my own by now haha, but I really want to figure out what it is I'm missing.
Any help would be amazing!
I'm using React-bootstrap package on my react project.
I tried to use simple navbar with dropdown example from react-bootsrap offical demo page.
Here is the example. Dropdown opening when click to 'dropdown' link but it's not closing when trying to click anywhere outside of dropdown. So it's not behave like on example on demo. What can be problem with that?
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
It's probably a little late for this but I had the same issue. What I finally ended up doing was adding this:
componentDidUpdate() {
document.getElementById("root").click();
}
This forced a closure as soon as the page was loaded. This was put into my main component, or app.js if you so choose.
HTH
I'm trying to add a glyphicon to a NavDropdown in React Bootstrap.
I know that you can add it to a normal Dropdown like this, as explained in the documentation.
<Dropdown id="dropdown-custom-1">
<Dropdown.Toggle>
<Glyphicon glyph="star" />
Pow! Zoom!
</Dropdown.Toggle>
<Dropdown.Menu >
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
</Dropdown.Menu>
</Dropdown>
What I've tried:
1. Does not work:
<NavDropdown eventKey={3} id="basic-nav-dropdown">
<NavDropdown.Toggle>
<Glyphicon glyph="star" />
Pow! Zoom!
</NavDropdown.Toggle>
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
2. Does not work:
<NavDropdown eventKey={3} title={<Glyphicon glyph="star" /> Dropdown} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
3. Does work but the caret is not aligned with the text and it appears in a new line:
<NavDropdown eventKey={3} title={<div><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
You can try to pass a title through the <Glyphicon /> component like this:
render() {
const navDropdownTitle = (<Glyphicon glyph="star"> Dropdown </Glyphicon>);
return (
<NavDropdown title={navDropdownTitle} eventKey={3} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
)
}
(Update) Or we can use your approach but with small fix for div style. The font style does not break down in this case.
<NavDropdown eventKey={3} title={<div style={{display: "inline-block"}}><Glyphicon glyph="star" /> Dropdown </div>} id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
</NavDropdown>
And you probably will need to disable text-decoration: underline style to make drop-down look better.
For example with this css-rule:
a.dropdown-toggle {
text-decoration: none;
}
<NavDropdown title={<BsPersonCircle />} id="collasible-nav-dropdown">
...
</NavDropdown>
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>