react-bootstrap navbar example

import { Route, RouteHandler, Link } from 'react-router';
import AuthService from '../services/AuthService'
import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';

/// In the render() method
<Nav pullRight>
  <LinkContainer to="/home">
    <NavItem eventKey={1}>Home</NavItem>
  </LinkContainer>
  <LinkContainer to="/book">
    <NavItem eventKey={2}>Book Inv</NavItem>
  </LinkContainer>
  <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown">
    <LinkContainer to="/logout">
      <MenuItem eventKey={3.1}>Logout</MenuItem>    
    </LinkContainer>      
  </NavDropdown>  
</Nav>

View another examples Add Own solution

Yellrag 70 points

                                    &lt;Navbar bg=&quot;light&quot; expand=&quot;lg&quot;&gt;
  &lt;Navbar.Brand href=&quot;#home&quot;&gt;React-Bootstrap&lt;/Navbar.Brand&gt;
  &lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot; /&gt;
  &lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;
    &lt;Nav className=&quot;mr-auto&quot;&gt;
      &lt;Nav.Link href=&quot;#home&quot;&gt;Home&lt;/Nav.Link&gt;
      &lt;Nav.Link href=&quot;#link&quot;&gt;Link&lt;/Nav.Link&gt;
      &lt;NavDropdown title=&quot;Dropdown&quot; id=&quot;basic-nav-dropdown&quot;&gt;
        &lt;NavDropdown.Item href=&quot;#action/3.1&quot;&gt;Action&lt;/NavDropdown.Item&gt;
        &lt;NavDropdown.Item href=&quot;#action/3.2&quot;&gt;Another action&lt;/NavDropdown.Item&gt;
        &lt;NavDropdown.Item href=&quot;#action/3.3&quot;&gt;Something&lt;/NavDropdown.Item&gt;
        &lt;NavDropdown.Divider /&gt;
        &lt;NavDropdown.Item href=&quot;#action/3.4&quot;&gt;Separated link&lt;/NavDropdown.Item&gt;
      &lt;/NavDropdown&gt;
    &lt;/Nav&gt;
    &lt;Form inline&gt;
      &lt;FormControl type=&quot;text&quot; placeholder=&quot;Search&quot; className=&quot;mr-sm-2&quot; /&gt;
      &lt;Button variant=&quot;outline-success&quot;&gt;Search&lt;/Button&gt;
    &lt;/Form&gt;
  &lt;/Navbar.Collapse&gt;
&lt;/Navbar&gt;

Thank you! 2

5 (2 Votes)

3.78

Fraggles 110 points

                                    import React from 'react'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    useParams,
  } from &quot;react-router-dom&quot;;
  import { Navbar,Nav,NavDropdown,Form,FormControl,Button } from 'react-bootstrap'
  import Home from './Home';
  import AboutUs from './AboutUs';
  import ContactUs from './ContactUs';

class BootstrapNavbar extends React.Component{

    render(){
        return(
            &lt;div&gt;
                &lt;div className=&quot;row&quot;&gt;
                    &lt;div className=&quot;col-md-12&quot;&gt;
                        &lt;Router&gt;
                            &lt;Navbar bg=&quot;dark&quot; variant=&quot;dark&quot; expand=&quot;lg&quot; sticky=&quot;top&quot;&gt;
                                &lt;Navbar.Brand href=&quot;#home&quot;&gt;React Bootstrap Navbar&lt;/Navbar.Brand&gt;
                                &lt;Navbar.Toggle aria-controls=&quot;basic-navbar-nav&quot; /&gt;
                                &lt;Navbar.Collapse id=&quot;basic-navbar-nav&quot;&gt;
                                    &lt;Nav className=&quot;mr-auto&quot;&gt;
                                    &lt;Nav.Link href=&quot;/&quot;&gt;Home&lt;/Nav.Link&gt;
                                    &lt;Nav.Link href=&quot;/about-us&quot;&gt;Contact Us&lt;/Nav.Link&gt;
                                    &lt;Nav.Link href=&quot;/contact-us&quot;&gt;About Us&lt;/Nav.Link&gt;
                                    &lt;NavDropdown title=&quot;Dropdown&quot; id=&quot;basic-nav-dropdown&quot;&gt;
                                        &lt;NavDropdown.Item href=&quot;#action/3.1&quot;&gt;Action&lt;/NavDropdown.Item&gt;
                                        &lt;NavDropdown.Item href=&quot;#action/3.2&quot;&gt;Another action&lt;/NavDropdown.Item&gt;
                                        &lt;NavDropdown.Item href=&quot;#action/3.3&quot;&gt;Something&lt;/NavDropdown.Item&gt;
                                        &lt;NavDropdown.Divider /&gt;
                                        &lt;NavDropdown.Item href=&quot;#action/3.4&quot;&gt;Separated link&lt;/NavDropdown.Item&gt;
                                    &lt;/NavDropdown&gt;
                                    &lt;/Nav&gt;
                                    &lt;Form inline&gt;
                                    &lt;FormControl type=&quot;text&quot; placeholder=&quot;Search&quot; className=&quot;mr-sm-2&quot; /&gt;
                                    &lt;Button variant=&quot;outline-success&quot;&gt;Search&lt;/Button&gt;
                                    &lt;/Form&gt;
                                &lt;/Navbar.Collapse&gt;
                            &lt;/Navbar&gt;
                            &lt;br /&gt;
                            &lt;Switch&gt;
                                &lt;Route exact path=&quot;/&quot;&gt;
                                    &lt;Home /&gt;
                                &lt;/Route&gt;
                                &lt;Route path=&quot;/about-us&quot;&gt;
                                    &lt;AboutUs /&gt;
                                &lt;/Route&gt;
                                &lt;Route path=&quot;/contact-us&quot;&gt;
                                    &lt;ContactUs /&gt;
                                &lt;/Route&gt;
                            &lt;/Switch&gt;
                        &lt;/Router&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        )  
    }
}

export default BootstrapNavbar;

Thank you! 9

3.78 (9 Votes)

Are there any code examples left?

Find Add Code snippet

New code examples in category Javascript

Javascript 2023-04-21 22:52:36
Javascript 2022-03-27 22:25:20 javascript download string as file
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
Javascript 2022-03-27 21:15:02 javascript regex french phone number
Javascript 2022-03-27 21:05:03 cypress custom error message
Javascript 2022-03-27 21:00:05 create element javascript with id
Javascript 2022-03-27 20:40:57 feather icons react
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

react-bootstrap navbar example

Welcome Back!

Create a Free Account