React Bootstrap — Navbars

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to add navbars to a React app with React Bootstrap.

Navbars

We can add navbars to add a navigation header with support for branding and navigation.

We can use the expand prop to allow for collapsing the navbar at lower breakpoints.

Navbars and their content are fluid by default.

To make a navbar, we can use the Navbar component:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import FormControl from "react-bootstrap/FormControl";
import NavDropdown from "react-bootstrap/NavDropdown";

export default function App() {
  return (
    <>
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="#home">nav bar</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Nav className="mr-auto">
            <Nav.Link href="#home">home</Nav.Link>
            <Nav.Link href="#foo">foo</Nav.Link>
            <NavDropdown title="Dropdown">
              <NavDropdown.Item href="#action/1">action 1</NavDropdown.Item>
              <NavDropdown.Item href="#action/2">action 2</NavDropdown.Item>
              <NavDropdown.Item href="#action/3">action 3</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/4">action 4</NavDropdown.Item>
            </NavDropdown>
          </Nav>
          <Form inline>
            <FormControl type="text" placeholder="search" className="mr-sm-2" />
            <Button variant="outline-primary">search</Button>
          </Form>
        </Navbar.Collapse>
      </Navbar>
    </>
  );
}

We created a navbar with the NavBar component.

The bg prop has the background color,.

Navbar.Brand has the brand name on the left side.

Navbar.Toggle is the toggle for opening the menu in the collapsed navbar.

Navbar.Collapse is a navbar that automatically collapses when the screen is narrow.

Nav.Link has the links.

NavDropdown has the dropdown.

title has the text that’s displayed in the dropdown toggle.

We also have an inline Form element to let us add a form inside the nav.

Navbar Brand

The brand can be an image or text.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";

export default function App() {
  return (
    <>
      <Navbar bg="light">
        <Navbar.Brand href="#home">app</Navbar.Brand>
      </Navbar>
    </>
  );
}

to add text to the left side.

bg is the background color, which can be light or dark .

We can also add an image by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";

export default function App() {
  return (
    <>
      <Navbar bg="light">
        <Navbar.Brand href="#home">
          <img
            alt="logo"
            src="http://placekitten.com/200/200"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />{" "}
          app
        </Navbar.Brand>
      </Navbar>
    </>
  );
}

to add a logo to the nav brand.

We have the className set to d-inline-block and align-top to add some margins to the logo.

Forms

We can add forms to a navbar if they’re inline.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";
import Form from "react-bootstrap/Form";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import Button from "react-bootstrap/Button";

export default function App() {
  return (
    <>
      <Navbar className="bg-light justify-content-between">
        <Form inline>
          <InputGroup>
            <InputGroup.Prepend>
              <InputGroup.Text>@</InputGroup.Text>
            </InputGroup.Prepend>
            <FormControl
              placeholder="name"
            />
          </InputGroup>
        </Form>
        <Form inline>
          <FormControl type="text" placeholder="search" className=" mr-sm-2" />
          <Button type="submit">Submit</Button>
        </Form>
      </Navbar>
    </>
  );
}

We add the justifyp-content-between prop to make the 2 forms display on the left and right edges.

Form set to inline so that they display inline.

Inside the Form , we have the usual InputGroup and FormControls .

Text and Non-Nav Links

We can add nav text that aren’t links with the Navbar.Text component.

For example, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";

export default function App() {
  return (
    <>
      <Navbar className="bg-light justify-content-between">
        <Navbar.Brand href="#home">text navbar</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <Navbar.Text>
            hello: <a href="#login">james</a>
          </Navbar.Text>
        </Navbar.Collapse>
      </Navbar>
    </>
  );
}

We have the Navbar.Text component that shows some text and a link inside it.

Color Schemes

We can change the color scheme with the variant and bg props.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";

export default function App() {
  return (
    <>
      <Navbar bg="primary" variant="dark">
        <Navbar.Brand href="#home">Navbar</Navbar.Brand>
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#foo">foo</Nav.Link>
          <Nav.Link href="#bar">bar</Nav.Link>
        </Nav>
      </Navbar>
    </>
  );
}

We have a navbar with bg set to primary to set the background color to blue .

The variant is overridden with the bg .

Conclusion

We can add forms and dropdowns to navbars.

They’re responsive.

Also, we can change the colors of navbars.