Here is a responsive navbar component with dropdown menus for a React app, styled with Bootstrap:
```jsx
import React from 'react';
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';
const NavBar = () => {
return (
// Use the Navbar component from react-bootstrap
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Navbar.Brand href="#home">Company Name</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
// Define the navigation links
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#about">About</Nav.Link>
<NavDropdown title="Services" id="basic-nav-dropdown">
// Add dropdown items for Services
<NavDropdown.Item href="#service1">Service 1</NavDropdown.Item>
<NavDropdown.Item href="#service2">Service 2</NavDropdown.Item>
<NavDropdown.Item href="#service3">Service 3</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="#contact">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default NavBar;
```
This code uses the `react-bootstrap` library to create a responsive navbar with a dropdown menu for the "Services" link. The dropdown items are defined using the `NavDropdown.Item` component. You can customize the appearance and behavior of the navbar by modifying the props and styles.
Note: Make sure to install `react-bootstrap` by running `npm install react-bootstrap` or `yarn add react-bootstrap` in your project directory.
Rocket
Mini tools
Open108726Released 1y ago100% FreeHere is a responsive navbar component with dropdown menus for a React app, styled with Bootstrap: ```jsx import React from 'react'; import { Navbar, Nav, NavDropdown } from 'react-bootstrap'; const NavBar = () => { return ( // Use the Navbar component from react-bootstrap <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark"> <Navbar.Brand href="#home">Company Name</Navbar.Brand> <Navbar.Toggle aria-controls="responsive-navbar-nav" /> <Navbar.Collapse id="responsive-navbar-nav"> // Define the navigation links <Nav className="mr-auto"> <Nav.Link href="#home">Home</Nav.Link> <Nav.Link href="#about">About</Nav.Link> <NavDropdown title="Services" id="basic-nav-dropdown"> // Add dropdown items for Services <NavDropdown.Item href="#service1">Service 1</NavDropdown.Item> <NavDropdown.Item href="#service2">Service 2</NavDropdown.Item> <NavDropdown.Item href="#service3">Service 3</NavDropdown.Item> </NavDropdown> <Nav.Link href="#contact">Contact</Nav.Link> </Nav> </Navbar.Collapse> </Navbar> ); }; export default NavBar; ``` This code uses the `react-bootstrap` library to create a responsive navbar with a dropdown menu for the "Services" link. The dropdown items are defined using the `NavDropdown.Item` component. You can customize the appearance and behavior of the navbar by modifying the props and styles. Note: Make sure to install `react-bootstrap` by running `npm install react-bootstrap` or `yarn add react-bootstrap` in your project directory.
