navbar.toggle aria-controls = basic-navbar-nav / código de ejemplo

Posterior a de una extensa búsqueda de datos resolvimos este apuro que presentan algunos usuarios. Te ofrecemos la respuesta y deseamos que te sea de gran apoyo.

Ejemplo: reactboostrap navbar responsive

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><divclassName="row"><divclassName="col-md-12"><Router><Navbarbg="dark"variant="dark"expand="lg"sticky="top"><Navbar.Brandhref="#home">React Bootstrap NavbarNavbar.Brand><Navbar.Togglearia-controls="basic-navbar-nav"/><Navbar.Collapseid="basic-navbar-nav"><NavclassName="mr-auto"><Nav.Linkhref="/">HomeNav.Link><Nav.Linkhref="/about-us">Contact UsNav.Link><Nav.Linkhref="/contact-us">About UsNav.Link><NavDropdowntitle="Dropdown"id="basic-nav-dropdown"><NavDropdown.Itemhref="#action/3.1">ActionNavDropdown.Item><NavDropdown.Itemhref="#action/3.2">Another actionNavDropdown.Item><NavDropdown.Itemhref="#action/3.3">SomethingNavDropdown.Item><NavDropdown.Divider/><NavDropdown.Itemhref="#action/3.4">Separated linkNavDropdown.Item>NavDropdown>Nav><Forminline><FormControltype="text"placeholder="Search"className="mr-sm-2"/><Buttonvariant="outline-success">SearchButton>Form>Navbar.Collapse>Navbar><br/><Switch><Routeexactpath="/"><Home/>Route><Routepath="/about-us"><AboutUs/>Route><Routepath="/contact-us"><ContactUs/>Route>Switch>Router>div>div>div>
        )  
    


export default BootstrapNavbar;

Finalizando este artículo puedes encontrar las reseñas de otros creadores, tú asimismo tienes la libertad de insertar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador