navbar with logo react

import React from 'react'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    useParams,
  } from "react-router-dom";
  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(
            <div>
                <div className="row">
                    <div className="col-md-12">
                        <Router>
                            <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
                                <Navbar.Brand href="#home">React Bootstrap Navbar</Navbar.Brand>
                                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                                <Navbar.Collapse id="basic-navbar-nav">
                                    <Nav className="mr-auto">
                                    <Nav.Link href="/">Home</Nav.Link>
                                    <Nav.Link href="/about-us">Contact Us</Nav.Link>
                                    <Nav.Link href="/contact-us">About Us</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>
                            <br />
                            <Switch>
                                <Route exact path="/">
                                    <Home />
                                </Route>
                                <Route path="/about-us">
                                    <AboutUs />
                                </Route>
                                <Route path="/contact-us">
                                    <ContactUs />
                                </Route>
                            </Switch>
                        </Router>
                    </div>
                </div>
            </div>
        )  
    }
}

export default BootstrapNavbar;

3.89
13
Cxx6xxc 95 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;

3.89 (9 Votes)
0
Are there any code examples left?
Create a Free Account
Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.
Sign up
Develop soft skills on BrainApps
Complete the IQ Test
Relative searches
using bootsrap responsive navbar in react react navigation bar responsive bootstrap responsive navbar bootstrap in react React-bootstrap responsive navbar example how to create responsive navbar in react-bootstrap responsive navbar in react bootstrap react-bootstrap navbar responsive react-boostrap responsive navbar how to make responsive navbar in react bootstrap responsive navbar reacttrap bootstrap react responsive navbar react responsive navbar using bootstrap 4 how to make my navbar responsive bootstrap react bootstrap responsive navbar in react responsive top navbar bootstrap react responsive navbar using bootstrap 4 in react js responsive navbar using react js and bootstrap reactstrap navbar responsive react bootstrap nav responsive responsive navbar reactstrap navbar responsive bootstrap react examples react responsive navbar bootstrap react bootsrap navbar respoinsive reactstrap responsive navbar react-bootstrap responsive navbar nav bootstrap react responsive responsive navbar using react router bootstrap navbar collapse bootstrap react react bootsrap responsive navbar responsive navbar react boostrap navbar for reac navbar with logo react bootstrap navdropdown react bootstrap nev bootstrap navbar toggle react bootstrap react navbar brand image how to style collapse meny react-bootstrap react-bootstrap collapse breakpoint react navbar component with dropdown and logo input in react bootstrap nav react bootstap nav react bootstrap navbar export function react bootstrap navbar component edit navbar.brand react in css bootstrap navigation bar react make a nav bar react nav bar in jsx how to make navbar fixed bootstrap in react react boot strap navpar will not stay fixed react bootsrap navbar example react navigation bar js react bootstrap navbar dark react js bootstrap navbar how to create a navbar readct react bootstrap navbar responsive collapse navbar react bootstrap react-bootstrap sample menu bootstrap navbar react example navbar with bootstrap react code bootstrap header in react js react bootstarp nav bootstrap navbar reactjs navbar design in react js NavBar props react bootstrap react boot strap nav onside where write navbar react reactjs navbar with logo how to create hear bar with content in reactje using bootstrap react bootstrap responsive navbar with toggle react css navbar navbar using bootstrap in react react js nav bar expand nav react tutorial react bootstrap toolbar css react bootstrap toolbar component navbar in reactjs styling navbar via react add nav bar reactjs react navbar with components react navbar with props react navbar elements react navigaion bae responsive navbar with react bootstrap navbar in react bootstrap example simple nav bar using react react-bootstap nav bar to jsx nav bar reactjs how to get react NavBar to work responsive navbar react withouthamburger react bootstrap collapse nav bootstrap navbar collapse react react responsive navbar codepen bootstrap 4 navbar responsive reactjs navigation bar react example react bootstrap navbar templates react bootstrap dark theme navbar react nav bar component ract bootstrap navbar react boosttrap navbar react bootstrap toogle navbar react bootstrap navbar bg color react bootsrap navbar.33.1 react bootsrap navbar.33.1 with function react react bootstrap sub bar react bootstrap menu react-bootstrap navbar position navbar.toggle react bootstrap how to add bootstrap in react nav bar class simple react navigation bar navbar for react bootstrap how to create a navbar in react react bootstrap navbar sticky react nav bar template react bootstrap navbar with logo react popup navbar react navbar responsive nav bar with react js navbar aria-controls react react navbar codes react bootstrap top bar example react bootstrap top bar react nnavbar react navigation bar component react js toggle custom navbar how can we add attributes to navbar in react js react bootstrap dropdown navbar bootsrtap navbar for react reactjs navigation bar react navbar code react bootstrap nav expand how to add css style with react bootstrap navbar bootdstrap react header navbar menu reactjs bootstrap 4 classname for navbar bootstrap navbar.collapse react bootstrap css classname react bootstrap nav navbar react bootstrap examples navbar bootstrap react js navbar.brand css react react bootstrap navigation bar jsx and css navbar react navbar sticky react bootstrap react-bootstrap navbar brand image react bootstrap headers how to use boostrap navbar toggler in react react library for navbar react bootstrap dynamic menu navbar for the react bootstrap react bootstrap horizontal navbar navbar dropdown react react how to create a navbar with bootstrap navbar for the reacts navigation bar bg color rectbootstrap bootstrap menu react example navbar react code style ract nav menu bootstrap reactjs menu horizontal bootstrap reactjs menu dark attribute Navbar react beautiful react navbar bootstrap navbar to react nav-wrapper css bootstrap react Bootstrap reactJS navbar height bootstrap responsive menu reactJS ReactJS BOOTSTRAP NAVIGATION BAR bootstrap react header bootstrap react header mobile add links in the navbar dropdown menu in react bootstrap 4 navbar bootstrap resact reackt navbar react bootstrap custom navbar react collapse navbar menu navbar header in react js import navbar from 'react-bootstrap' building responsive navbar header code in react Bootstrap react bootstrap logo text create navbar in react js navigation bar in react bootstrap react bootstrap navbar brand href react bbot strap nav bar react bootstrap navbar brand image and text react bootstrap navbar header react bootstrap custom css navbar toggle header bootstrap react set navbar and header same bg with react bootstrap appbar bootstrap reacr how to add variant to the navbar header react bootstrap react template with navbar complete navbar in react bootstrap navbar fixed top responsive reactjs collapsed bootstrap navbar fixed top responsive react js navbar react css nav in react bootstrap navbar react js bootstrap react bootstrap navbar brand vertical center Navbar Brand clickable react bootstrap navbar navbar-expand-md reactjs navbar.toggle react bootstrap in react js menu bar how to make my navbar responsive react bootstrap simple collapsible navbar example Navbar in reactz navbar ui bootstrap react js react bootstrap navbar mobile react bootstrap navbar toggle navbar - react react js responsive navbar example material-ui react responsive navbar react responsive navbar example react navbar examples how to add bootstrap navbar in react bottom navigation react bootstrap header using bootstrap react classname nav and bg-primary in react using bootstrap navbar in react react header nav react bootstrap navbar as responsive navar react navigation css react react bootstrap nav collapse menu reactbootstrap nav collapse menu navbar static react bootstrap styling react bootstrap navbar react bootstarp header samples navbar in react js example navifation bar react react bootstrap drawer reactjs bootstrap 4 auto collapse nav react navbar bg move react bootstrap navbar tutorial customizing react-bootstrap navbar bootstrap react navbar style react-bootstrap example navbar navbar degine in reactstrap react-bootstrap navbar-collapse example react bootstrap navbar search example navbar react components nav bar react components custom navbar design in react js react navbar dark nabar.collapse inreact bootstrap nav dropdown react bootstrap react-bootstrap navbar template example reactt components nav bar navbar responsive bootstrap 4 react how to increase size of react-bootstrap navbar.brand react-bootstrap button navbar example drawer react bootstrap navbar menu react bootstrap js navbar react react bootstrap side navbar how to react bootstrap responsive navbar nav bar css in react react navbar with button react navbar with icons bootstrap navbar jsx react bootstrap navbar button bootstrap nav react reactjs bootstrap logo react-bootstrap navbar buttons react placeholder navbar classname of navigation bar in bootstrap nav variant bootstrap react using navbar in react bootstrap react responsive navigation bar react bootstrap navigation react bootstrap navbar dropdown custom navbar react react bootstrap navbar generator bootstrap react navbar example bootstrap nav vs navbar in react-bootstrap create boostrap nav reactjs react-bootstrap navbar style react bootstrap nave menu bootstrap nav bar react nav com react e bootstrap App drawer react boostrap defaultExpanded prop react-bootstrap navbar react bootstrap sticky top navbar reactboostrap navbar react header bootstrap bootsrap navbar react dropdown react nav without bootstrap nav dropdown react react bootstrap create navbar reactjs boostrap navbar how to make a navbar toggle with react react bootstrap create a navbar react bootstrap navigationn react-bootstrap navbar examples react responsive navbar react bootstrap nav container navbar bootstrap react logo responsive react js navbar navbar react-component react.js navbar react boostarp navbar react boostarp navba react bootsrap navbar react bootstrap navbar with icon NAVBAR HAMBURGUER REACT BOOTSTRAP nav bootstrap react react bootstrap navbar fixed top styling nav bar with react react-bootstrap navbar tutorial responsive navbar react bootstrap react navbar toggler reactnavbar collapse navbar menu react header navbar react example header navbar react making bootstrap react links horizontal how to make nav link horizontal react-bootstrap expand property in navbar react bootstrap navbar styling reactjs responsive navbar with react-bootstrap reactjs bootstrap 4 navbar react bootstrap fixed navbar navbar code for react nav bar code for react react bottstarp navbar navbar react responsive bootstrap navbar for react react bootstrap nav responsigve react boostrap responsive navbar example react bootstrap navbar template how to add an id on react navbar NavDropdown bootstrap react bottstrap navbar navbar logo react bootstrap react-bootstrap nav dropdown import bootstrap navbar collapse navbar bootstrap in react collapse nav bar bootstrap in react navigation bar reactjs react bootstrap navbar is not responsive bootstrap react js navbar react navbar with extra nav in dropdownlist nav code react bootstrap create humburger navigation bar using react bootstarp react navbar prop bg color react js bootstrap header react bootstrap header component navbar toggle react bootstrap how to make a nav bar react navigation bar component react react is navbar a component react bootsrtap nav bar react-bootstrap navbar collapse react bootstrap navbar collapse on click navbar.collapse react basic react navbar responsive navbar bootstrap react jsx navbar react js navigation bar example react-bootstrap navbar sticky? responsive navbar react navbar for react navbar for react js react-bootstrap collapse navbar example react js bootstrap navbar and jumbotron react navbar brand nav in reactjs navbar collapse in bootstrap react nav for bootstrap in react import { NavBar } from &lsquo;./NavBar.js&rsquo;; react react bootstrap navbar responsive bg color how to make a nav bar in react js react bootstrap nav button react bootrap navbar login reactstrap navbar with search customize navbar in react bootstrap customized navbar in react bootstrap how to expand navbar component react bootstrap navbar design in reactjs navbar examples inreact react bootstrap collapse navbar making reponsive nav in bootstrap react how to create navigation bar with react how to create a navigation bar in react react bootstrap navbar responsive how to make custom navbar in bootstrap react react bootstrap navbar change default behaviour react bootstrap navbar toggle example bootstrap better nav react react header navbar component cool navbar react bootstrap nav dropdown bootstrap react how to create a navbar on react nav bar example in react js react navbar example navbar fixed top react bootstrap navbar react bootstrap color react bootstrap burger menu nav bar in react bootsrtac create nav bar for react react bootstraps navbar react bootstrap navabart navbar react ui component navbar react component ui navbar.toggle aria-controls= basic-navbar-nav / navbar dropdown react bootstrap how to make bootstrap react navbar responsive react bootstrap navbar collapse reactboostraps navbar creating a nav bar reactjs react bootstrap nav bar button react bootstrap navbar onthe top navdropdown react native react bootstrap header for react react bootstrap navbar brand image navbar react-bootstrap react-bootstrap main-nav-wrap dark css navigation bars for react react bootstrap sticky navbar navbar to react react navbar component example navigation bar for react simple navbar react bootstrap navbar react js navbar-dark in react navbar that works in react boostrap nav bar in react collapsing navbar react manual collapsing navbar react create navbar in react big navigation bar react bootstrap boostrap nav bar react react boostrap navigation bootstrap raect navbar react-bootstrap navbar.brand component docs header navigation bar react react responsive burger navbar bootstrap react responsive navbar example with bootstrap 4 react bootstrap navbar collapse screen size fixed navbar react bootstrap react vnavbar navbar using reactjs react bootstrap import navbar react bootstrap menu example react boostap menu how to separate navbar.brand and nav react bootstrap react top menu bar react horizontal menu bar bootstrap navbar in react navigation react bootstrap import bootstrap navbar in react reactjs navbar component toop nav bar in react js nav bar in react js create navbar react sticky navbar bootstrap react how navbar.collapse react bootstrap work navbar.collapse react bootstrap work navbar collapse react bootstrap navbar.collapse react bootstrap navbar brand text not inline react bootstrap side navigation bar in react bootstrap header in react bootstrap navbar react example logo in navbar bootstrap react Navbar bootstrap import react bootstrap header navigation bar in react import navbar from 'react-bootstrap/navbar' black navvar in react bootstrap make search fill the rest of navbar react bootstrap how to make content of navbar responsive react bootstrap responive react navbar template react navbar template import react bootstrap navbar navigation header responsive react bootstrap navigation bar with logo react bootstrap create a navigation bar in react react navbar dropdown navigation bar react bootstrap &lt;Navbar collapseOnSelect expand=&quot;md&quot; bg=&quot;light&quot; variant=&quot;light&quot; fixed=&quot;top&quot; className=&quot;nopadding&quot;&gt; react bootstrap nav bar react component navbar react-boostrap navbar stickytop nav in react import react boostrap navbar react top navigation bar components react navigation bar components react-bootstrap cool mobile menu bootstrap header react React bootstrap class for Nav react bootstrap fixed style navbar in react react bootstrap hamburger menu react navbar css reactr bootstrap navigation bar import navbar component react bootstrap react component navigation bar good looking navbars react react bootstrap mobile navbar best looking bootstrap react navbars navbar component react js nav bar for react react nav bar react component changing mobile navbar css in react-bootstrap editing the mobile verison of react-bootstrap navbar navbar code react making a nice nav react bootstrap react bootstrap nav making a nice navbar react bootstrap react-react nav bar react navbar bootstarp react navbar bootstrap navbar react component navbar react bootstrap example best react bootstrap nav bars react top navigation bar navbars react js react bootsrap nav toggle bootstrap navbar brand image react react-bootstrap navbar example react navabrn component navigation bar react responsive navbar template react react-boostrap header basic navbar react navbar reactjs react navbars react-bootstrap header stickyexample react js navbar react bootstrap responsive navbar example react bootstrap responsive navbar nav bar in react react bootstrap navbar left content reactbootstrap navbar left content reactbootstrap navbar left contente how to toggle bootstrap navbar in react react bootstrap navbar example react bootstrap search bar in the navbar an example of navbar bootstrap for react responsive header react bootstrap responsive header bootstrap react navbar.header react bootstrap 4 navbar.header react bootstrap react navigation bar react boostrap expand navbar Form in a Nav element react bootsrap bootstrap navbar react navbar responsive react bootstrap Nav react bootstrap navbar using react navbar in react navbar bootstrap react how to stick the navbar to the top in react bootstrap? navbar in react bootstrap bootstrap header component in react js how to make header using react bootstrap? navbar header react bootstrap navbar and nav react-bootstrap react js top navbar react js upper navbar collapsible navbar in react navbar using react code navbar componnet of react react-bootstrap navbar booktstrap react nav bar navbar collapse react with funtctional component beautiful navbars with react bootstrap react navbar logo navbar with react react navigation bar example react bootstrap navdropdown nav bar react navbar css react nav item react bootsrap mobile navbar react best bootstrap navbar for react reactjs navbar type of searchbar in bootstrap react navbar react js navigation bar react-bootstrap header bootstrap ui react navbar space bootstrap nav bar in react navbar react boostrap with logout icon only navbar collapse react navbar in react js navbar component react navbar for react bootstrap 4 bootstrap react navbar react navbar toggle smaller boostrap react navbar select react bootstrap sticky creating a bootstrap navbar using react how to add react bootstrap in react navbar how to use react bootstrap navbar navbar.brand react style navbar bootstrap 4 reactjs how to navbar react navbar-expand-lg react bootstramp sie collapse navbar for react how to add navbar in react how to do a multilevel nav item with a vertical nav using react-bootstrap react bootstrap navbar color react bootstrap navbar logo react-bootstrap Nav react-bootstrap side navbar example react components nav bar navdropdown react bootstrap navbar button react-bootstrap react simple navbar react navbar component navbar classname css navbar in reactj navigation bar in react js react navbar theme react navbar react nav bar navbar react bootstrap HOW TO SET IT UP NAV BAR BRAND PARALLELY ON TOGGLE react bootstrap how to set the image to nav bar heigh react bootstrap sticky navbar react bootstrap react navbar styling react bootstrap navbar navbar fixed in react bootstrap react header and navbar navbar boostrap react horizontal width react bootstrap logo navbar logo react-bootstrap navbar react bootstrap input
Made with love
This website uses cookies to make IQCode work for you. By using this site, you agree to our cookie policy

Welcome Back!

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign in
Recover lost password
Or log in with

Create a Free Account

Sign up to unlock all of IQCode features:
  • Test your skills and track progress
  • Engage in comprehensive interactive courses
  • Commit to daily skill-enhancing challenges
  • Solve practical, real-world issues
  • Share your insights and learnings
Create an account
Sign up
Or sign up with
By signing up, you agree to the Terms and Conditions and Privacy Policy. You also agree to receive product-related marketing emails from IQCode, which you can unsubscribe from at any time.
Creating a new code example
Code snippet title
Source