I want to add Navigation Bar to my website using Bootstrap in ReactJS. But all NavItems are on separate lines. How to put them on one line. I followed the guide in Bootstrap docs.
Output image
import React, { Component } from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return(
<div className="Header">
<Navbar inverse collapseOnSelect>
<Navbar.Header>
</Navbar.Header>
<Navbar.Collapse>
<Nav pullLeft>
<NavItem eventKey={1} href="#">
Link1
</NavItem>
<NavItem eventKey={2} href="#">
Link2
</NavItem>
</Nav>
<Nav pullRight>
<NavItem eventKey={1} href="#">
Link3
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
}
export default Header;
You need to add de css to your index.html, from your package or from the CDN.
check this Link for more info
[Working Demo is here] codesendbox
Related
I used the react router bootstrap element 'linkContainer' to try and create a hyperlink leading to the '/courses' page but the browser returns a blank page with the following error in the console: React.children.only expected to receive a single react element child.
at Object.onlyChild [as only]
at LinkContainer
import React from 'react';
import { Container, Nav, Navbar, NavDropdown, Offcanvas } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap'
function Header() {
return (
<header>
<Navbar bg="black" variant= "dark" expand='lg' className="py-4 border border-0">
<Container fluid>
<LinkContainer to='/'>
<Navbar.Brand> Market Snipers Academy </Navbar.Brand>
</LinkContainer>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand`}
aria-labelledby={`offcanvasNavbarLabel-expand`}
placement="end"
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand`}>
Market Snipers Academy
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav variant='pills' className="justify-content-start flex-grow-1 pe-3 rounded">
<LinkContainer to='/courses'> <Nav.Link>Courses</Nav.Link> </LinkContainer>
<NavDropdown
title="Dropdown"
id={`offcanvasNavbarDropdown-expand`}
>
<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>
<Nav>
<Nav.Link href="#deets">Login</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Signup
</Nav.Link>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</header>
)
}
export default Header
I have been trying to put a Navbar into a React Project using reactstrap. But the Navbar is not showing just the h1 in the NavbarBrand is rendered for some reasons. I tried to change the css styling, copy and pasted other example Navbars from different websites and tried other kinda similar solutions from here but nothing worked. I am using React version 17.0.2 and reactstrap version 8.9.0.
This is my Navbar Component:
import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap';
//import { NavLink } from 'react-router-dom';
class Header extends Component {
constructor(props) {
super(props);
this.state = {
isNavOpen: false
};
this.toggleNav = this.toggleNav.bind(this);
}
toggleNav() {
this.setState({
isNavOpen: !this.state.isNavOpen
});
}
render() {
return(
<Navbar bg="dark" variant="dark">
<div className="container">
<NavbarToggler onClick={this.toggleNav} />
<NavbarBrand href="/">
<h1>Navbar</h1>
</NavbarBrand>
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
</div>
</Navbar>
);
}
}
export default Header;
How the navbar looks
I am rather new to React and Javascript overall i hope someone can help me.
You have the isNavOpen in state set to false and your
<Collapse isOpen={this.state.isNavOpen} navbar>
<Nav navbar>
<NavItem>
<p>Test</p>
</NavItem>
</Nav>
</Collapse>
depends upon isNavOpen state which expects to be true to be shown on the screen.
Try setting isNavOpen to true in the state.
I have used react Bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.
Packages
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";
Navbar
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
onClick={this.closeNavbar}
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item
Example:
import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as={Link} to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as={Link} to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>
I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.
An easy workaround that doesn't require jQuery:
<DropdownButton title={buttonTitle} onSelect={() => null}>
or if you're still using ES5:
<DropdownButton title={buttonTitle} onSelect={function() {}}>
It doesn't seem to matter what the onSelect callback returns.
I had the same problem, found a fix.
It is must to add expand attribute to your Navbar Component.
<Navbar variant="dark" expand="lg">
just use eventKey="2" inside <Nav.link/> . It will works fine for react js .
The navbar buttons are not working. When I click on them, they just work when I click open in a new page.
export default class DefaultNavBar extends Component {
render() {
return (
<div className="navbar-fixed-top">
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
GatherUp
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="/">Home</NavItem>
<NavItem eventKey={2} href="/event">Event</NavItem>
<NavItem eventKey={3} href="/signup">Sign Up</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
I am learning react. I am trying to create a navbar and have my tabs open components as new pages using browser router. (When I click the navitems nothing is happening) I have website_header.js as:
import React, { Component } from 'react';
import {Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return (
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
Logo
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href='/'>Home</NavItem>
<NavItem eventKey={2} href='/Band'>Band</NavItem>
<NavItem eventKey={3} href='/Discography'>Discography</NavItem>
<NavItem eventKey={4} href='/Media'>Media</NavItem>
<NavItem eventKey={5} href='/Contact'>Contact</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default Header;
Then App.js as:
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Header from './components/website_header';
import Home from './components/website_index';
import Band from './components/website_band';
import Discography from './components/website_discography';
import Media from './components/website_media';
import Contact from './components/website_contact';
import './App.css';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/Band' component={Band}/>
<Route path='/Discography' component={Discography}/>
<Route path='/Media' component={Media}/>
<Route path='/Contact' component={Contact}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
If I put just this it works:
import React, { Component } from 'react';
import {Navbar, Nav, NavItem } from 'react-bootstrap';
class Header extends Component {
render() {
return (
<Navbar brand='React-Bootstrap'>
<Nav>
<NavItem eventKey={1} href='/'>Home</NavItem>
<NavItem eventKey={2} href='/Band'>Band</NavItem>
<NavItem eventKey={3} href='/Discography'>Discography</NavItem>
<NavItem eventKey={4} href='/Media'>Media</NavItem>
<NavItem eventKey={5} href='/Contact'>Contact</NavItem>
</Nav>
</Navbar>
);
}
}
export default Header;
Any help would be greatly appreciated I am very new to this.
You could do as oklas suggested, or replace <NavItem> with <li> and <Link>:
For react-router v4:
render() {
return (
<Navbar brand='React-Bootstrap'>
<Nav>
<NavLink to='/'>Home</NavLink>
<NavLink to='/Band'>Band</NavLink>
<NavLink to='/Discography'>Discography</NavLink>
<NavLink to='/Media'>Media</NavLink>
<NavLink to='/Contact'>Contact</NavLink>
</Nav>
</Navbar>
);
}
and for v3 and below (you may add activeClassName prop for styling on the active route link):
render() {
return (
<Navbar brand='React-Bootstrap'>
<Nav>
<li><Link to='/'>Home</Link></li>
<li><Link to='/Band'>Band</Link></li>
<li><Link to='/Discography'>Discography</Link></li>
<li><Link to='/Media'>Media</Link></li>
<li><Link to='/Contact'>Contact</Link></li>
</Nav>
</Navbar>
);
}
Just make sure to import NavLink or Link respectively from react-router.
The react-bootstrap has no integration with react-router. Use react-router-bootstrap for that:
import {LinkContainer} from 'react-router-bootstrap'
<LinkContainer to="/home">
<NavItem eventKey={1}>Home</NavItem>
</LinkContainer>