I could not find a quick solution to implement nice hamburgers from https://jonsuh.com/hamburgers/ to react-bootstrap.
It does not work with (because it is button inside the button).
<Navbar.Toggle>
<Hamburger />
</Navbar.Toggle>
I found another hamburger solution for react-bootstrap.
import { useState } from 'react'
import Container from 'react-bootstrap/Container'
import Nav from 'react-bootstrap/Nav'
import Navbar from 'react-bootstrap/Navbar'
import Hamburger from 'hamburger-react'
function NavigationHead() {
const [isOpen, setOpen] = useState(false)
return (
<Navbar collapseOnSelect expand="md" bg="light">
<Container>
<Navbar.Brand href="/">Navbar</Navbar.Brand>
<Navbar.Toggle>
<Hamburger toggled={isOpen} toggle={setOpen} />
</Navbar.Toggle>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="/#/catalog">Catalog</Nav.Link>
<Nav.Link href="/#/favourites">Favourites</Nav.Link>
</Nav>
<Nav>
<Nav.Link href="/#/tasks">My tasks</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
export default NavigationHead
Related
I have a react app with a bootstrap offcanvas navbar that comes in from the right side when I click the hamburger. It works and closes when I click outside the offcanvas element or on the x inside the component, but when I click on a link it renders the new page but the navbar is still open. Is there a way I can force it to close when a user clicks on a link to a new page?
Here is the navbar code that is imported into the header which is imported into App.js:
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import { LinkContainer } from 'react-router-bootstrap';
import Offcanvas from 'react-bootstrap/Offcanvas';
function OffcanvasNav() {
return (
<>
{[false].map((expand) => (
<Navbar key={expand} bg='light' expand={expand} className='mb-3'>
<Container fluid>
<Navbar.Brand to='/'>Denver Judo</Navbar.Brand>
<Navbar.Toggle aria-controls={`offcanvasNavbar-expand-${expand}`} />
<Navbar.Offcanvas
id={`offcanvasNavbar-expand-${expand}`}
aria-labelledby={`offcanvasNavbarLabel-expand-${expand}`}
placement='end'
>
<Offcanvas.Header closeButton>
<Offcanvas.Title id={`offcanvasNavbarLabel-expand-${expand}`}>
Denver Judo
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className='justify-content-end flex-grow-1 pe-3'>
<LinkContainer to='/'>
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to='/schedule'>
<Nav.Link>Schedule</Nav.Link>
</LinkContainer>
<LinkContainer to='/about'>
<Nav.Link>About</Nav.Link>
</LinkContainer>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
))}
</>
);
}
export default OffcanvasNav;
I don't know if this is the best way to handle it but I added an onClick to each of the LinkContainers to set expend = '' and it works.
<LinkContainer to='/' onClick={() => (this.expand = '')}>
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to='/schedule' onClick={() => (this.expand = '')}>
<Nav.Link>Schedule</Nav.Link>
</LinkContainer>
<LinkContainer to='/about' onClick={() => (this.expand = '')}>
<Nav.Link>About</Nav.Link>
</LinkContainer>
Hi guys so I'm trying to make header for my web page application using React Bootstrap, but I can't separate the logo with the Nav.link (all of them placed on the left side), but I want the Logo to be on the left side meanwhile the other Nav.link on the right side. In normal bootstrap we just have to add justify-content-end on the list but for React Bootstrap it didn't work, can anyone help me with this please ?
Here's my code:
import '../styles/Header.css'
import { Navbar, Nav } from "react-bootstrap"
import { Link } from 'react-router-dom'
function header() {
return (
<Navbar className="color-nav" variant="dark" expand="lg">
<Navbar.Brand as={Link} to={"/"}>Logo will be Here</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="justify-content-end">
<Nav.Link as={Link} to={"/facilities"}>Facilities</Nav.Link>
<Nav.Link as={Link} to={"/room"}>Room</Nav.Link>
<Nav.Link as={Link} to={"/contactus"}>Contact Us</Nav.Link>
<Nav.Link as={Link} to={"/bookingroom"}>Book now</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
export default header
You forget to add display flex , so without it is not a flexbox . add d-flex , hope will work.
How to add <Navbar.Brand href="#home"> logo at center using react-bootstrap. Please find the below code I wrote.
Please help with this.
import React from 'react'
// import styles from './header.module.css'
// import { HomenetLink } from '../theme/components/Hyperlink'
import { Navbar, Nav } from 'react-bootstrap'
import Navheader from './NavHeader'
import { useTranslation } from 'react-i18next'
const Header = () => {
const { t } = useTranslation()
return (
<div>
<Navbar expand="lg">
<Navheader/>
<Navbar.Brand href="#home"><img
id="homenetlogo"
src="../.././images/homemain.png"
alt="HomeNet"
width="165px"
height="30px;"
/></Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link href="javascript:void(0);" className="coverage-activate" data-activates="coverage">{t('header.coverage')}</Nav.Link>
<Nav.Link href="http://homenet_local/kundeservice" data-collapsible="coverage" >{t('header.customerService')}</Nav.Link>
<Nav.Link href="/minside/" data-collapsible="coverage" >{t('header.myPage')}</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
export default Header
Hi please add a class as below and add css
.brand-center {justify-content: "center"}
<Navbar.Brand href="#home" className="brand-center"><img
id="homenetlogo"
src="../.././images/homemain.png"
alt="HomeNet"
width="165px"
height="30px;"
/></Navbar.Brand>
Navbar doesnt change a background color, i tried to do bg/variant = dark/black , it doesnt change anything
import React, { Component } from 'react';
import {Navbar,Container,Nav} from 'react-bootstrap';
export default class Header extends Component{
render() {
return(
< Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" >
<Container>
<Navbar.Brand href="/">My landing Page</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/aboutMe" > About me</Nav.Link>
<Nav.Link href="/aboutUnivercity"> My Univercity</Nav.Link>
<Nav.Link href="/video"> My videos</Nav.Link>
<Nav.Link href="/myMotivate"> MyMotivate</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
)
}
}
Source if needed:
https://github.com/aokhar/SumPract
You have to add bootstrap in your react app.
In your terminal using yarn type:
yarn add bootstrap
Then at the top of your js file add:
import "bootstrap/dist/css/bootstrap.css";
After this hopefully all the colors will render.
I am very new to react and have been using react-storybook to build components to teach myself react UI. I am also trying to learn react-bootstrap which is recommended for the react Facebook boilerplate.
I am getting an error when I try to load a component that uses react-bootstrap
here is the error:
Nav is not defined
ReferenceError: Nav is not defined
at eval (webpack:///./src/stories/index.js?:114:9)
at renderMain (webpack:///./~/#kadira/storybook/dist/client/preview/render.js?:108:17)
at renderPreview (webpack:///./~/#kadira/storybook/dist/client/preview/render.js?:141:12)
at Array.renderUI (webpack:///./~/#kadira/storybook/dist/client/preview/index.js?:89:26)
at Object.dispatch (webpack:///./~/redux/lib/createStore.js?:186:19)
at ConfigApi._renderMain (webpack:///./~/#kadira/storybook/dist/client/preview/config_api.js?:48:24)
at render (webpack:///./~/#kadira/storybook/dist/client/preview/config_api.js?:66:17)
at ConfigApi.configure (webpack:///./~/#kadira/storybook/dist/client/preview/config_api.js?:91:9)
at Object.eval (webpack:///./.storybook/config.js?:9:26)
at eval (webpack:///./.storybook/config.js?:10:30)
Here is my config.js
import { configure } from '#kadira/storybook';
function loadStories() {
require('../src/stories');
}
configure(loadStories, module);
Here is the navbar component called MenuHeader
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
const Mainbar = ({}) => (
<Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
mainBar
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link1</NavItem>
<NavItem eventKey={2} href="#">Link2</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
);
export default Mainbar;
Here is the index.js
import React from 'react';
import { storiesOf, action, linkTo } from '#kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';
import Mainbar from './MenuHeader';
storiesOf('Welcome', module)
.add('to Storybook', () => (
<Welcome showApp={linkTo('Button')}/>
));
storiesOf('Button', module)
.add('with text', () => (
<Button onClick={action('clicked')}>Hello Button</Button>
))
.add('with some emoji', () => (
<Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
));
storiesOf('Mainbar', module)
.add('Test Navbar',() => ( <Navbar inverse collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
mainBar
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Link1</NavItem>
<NavItem eventKey={2} href="#">Link2</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>));
Any help would greatly be appreciated
That's because in your MenuHeader Component, Nav and NavItem components are not defined.
You can import it as.
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
const Mainbar = ({}) => (
Do check the import code as i haven't used react-bootstrap