const NavigationBar = () => ( <Styles> <Navbar expand="lg"> <Navbar.Brand href="/">Shoreline IoT</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav"/> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="ml-auto"> <Nav.Item><Nav.Link href="/">Notification</Nav.Link></Nav.Item> <Nav.Item><Nav.Link href="/organization">Quick Link</Nav.Link></Nav.Item> </Nav> </Navbar.Collapse> </Navbar> </Styles> )
render() { const loginLogout = this.props.loggedInUsername == null ? <NavItem style={navbarStyling} componentclass="span"><Link to="/login">Login</Link></NavItem> : <NavItem style={navbarStyling} onClick={() => this.props.showPopup(1, 'Are sure you want to logout ' + this.props.loggedInUsername + '?', this.onLoggedOut)}>Logout</NavItem> return ( <Navbar bg="light" expand="lg" > <Navbar.Brand><Link to="/">Demo Bank</Link></Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <NavItem style={navbarStyling} componentclass="span"><Link to="/users">Users</Link></NavItem> <NavItem style={navbarStyling} componentclass="span"><Link to="/currency">Currency</Link></NavItem> <NavItem style={navbarStyling} componentclass="span"><Link to="/transfer">Transfer</Link></NavItem> <NavItem style={navbarStyling} componentclass="span"><Link to="/history">Transaction History</Link></NavItem> </Nav> <Nav className="ml-auto"> {this.props.loggedInUsername == null ? <NavItem style={navbarStyling} componentclass="span"><Link to="/register">Register</Link></NavItem> : null} {loginLogout} </Nav> </Navbar.Collapse> </Navbar> ); }
render() { return( <Navbar bg="light" > <Navbar.Brand href="/">React-Bootstrap & React Redux</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link href="#link">Link</Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ) }
const Navigation = (props) => { let navigate = props.history return ( <Navbar bg="light" expand="lg"> <Navbar.Brand onClick={() => { navigate.push("/") }}>Recipes</Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav"> <Nav className="mr-auto"> <Nav.Link onClick={() => { navigate.push("signup") }}> SignUp </Nav.Link> <Nav.Link onClick={()=>{navigate.push("search")}}>Search</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> </Navbar.Collapse> </Navbar> ) }
// Nav className controls alignment of links // Navbar.Brand className controls when that element disappears and reappears with d-block and d-none (choose a size: sm, lg, etc) function Nav2() { return ( <> <Navbar expand="sm" bg="dark" variant="dark"> <Nav className="mx-auto"> <Navbar.Brand className="d-block d-sm-none" href="#home">Home</Navbar.Brand> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#features">Pricing</Nav.Link> <Navbar.Brand className="centeredBrand d-none d-sm-block" href="#home">Home</Navbar.Brand> <Nav.Link href="#pricing">About</Nav.Link> <Nav.Link href="#features">Contact</Nav.Link> </Nav> </Navbar> <Jumbotron> <h1>Hello, world!</h1> <p> This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. </p> <p> <Button variant="primary">Learn more</Button> </p> </Jumbotron> </> ); }
export default function NavBar({ user, onUserChange }) { return ( <Container> <Navbar bg="dark" variant="dark" expand="md" fixed="top"> <Navbar.Brand>React-Blog</Navbar.Brand> <Nav className="mr-auto"> <Nav.Link href="/posts">Recent Posts</Nav.Link> <AddPostNavItem user={user} /> </Nav> <Nav pullright="true"> <SearchNavItem /> <SignInNavItem user={user} onUserChange={onUserChange} /> </Nav> </Navbar> </Container> ); }
function Nav1() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Home</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collapsible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Actions</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.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); }
render() { return ( <Navbar default collapseOnSelect> <Container> <Navbar.Brand href="/"> React-Bootstrap </Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> </Container> <Navbar.Collapse> <Nav> <Nav.Link eventKey={1} href="/"> Home </Nav.Link> <Nav.Link eventKey={2} href="/about"> About </Nav.Link> <Nav.Link eventKey={3} href="/news"> News </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ) }
render() { return ( <div> <Navbar bg='light' expand='lg'> <Navbar.Brand href>React Routing Example</Navbar.Brand> <Navbar.Collapse id='basic-navbar-nav'> <Nav className='mr-auto'> <Link to='/'> <Nav.Link href='/'>Home</Nav.Link> </Link> <Link to='/contact'> <Nav.Link href='/contact'>Contact</Nav.Link> </Link> </Nav> </Navbar.Collapse> </Navbar> </div> ) }
function Nav1() { return ( <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Home</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> <Nav className="ml-auto"> <Nav.Link href="#features">Features</Nav.Link> <Nav.Link href="#pricing">Pricing</Nav.Link> <NavDropdown title="Dropdown" id="collapsible-nav-dropdown"> <NavDropdown.Item href="#action/3.1">Actions</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.Link href="#deets">More deets</Nav.Link> <Nav.Link eventKey={2} href="#memes"> Dank memes </Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); }