React Bootstrap — Customize 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 customize navbars to a React app with React Bootstrap.

Containers

We may wrap a navbar in the Container component to center it on a page.

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";
import Container from "react-bootstrap/Container";

export default function App() {
  return (
    <>
      <Container>
        <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>
      </Container>
    </>
  );
}

We center the navbar with the Container .

Placement

We can change the placement of the nav bar with the position utilities that comes with Bootstrap.

We pass in the fixed or sticky props to make the nav stick to the top or the bottom.

For example, we can write:

<Navbar fixed="top" />

to make the navbar stay fixed to the top.

And we can write:

<Navbar fixed="bottom" />

to make it fixed to the bottom.

We can replace fixed with sticky .

Fixed is displayed with respect to the viewport.

And sticky is positioned based on the user’s scroll position.

So 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";
import Container from "react-bootstrap/Container";

export default function App() {
  return (
    <>
      <Container>
        <Navbar fixed="top">
          <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>
      </Container>
    </>
  );
}

to make the navbar always stay on the top of the viewport.

Responsive Behaviors

To make the navbar responsive, we add the Navbar.Toggle and Navbar.Collkapse components to display the collapsed navbar as a menu when the screen is narrower than the given breakpoint.

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";
import NavDropdown from "react-bootstrap/NavDropdown";

export default function App() {
  return (
    <>
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">App</Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
          <Nav className="mr-auto">
            <Nav.Link href="#foo">foo</Nav.Link>
            <Nav.Link href="#bar">bar</Nav.Link>
            <NavDropdown title="Dropdown" id="collasible-nav-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>
          <Nav>
            <Nav.Link href="#baz">baz</Nav.Link>
            <Nav.Link eventKey={2} href="#qux">
              qux
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </>
  );
}

to create a navbar that’s collapsed into a hamburger menu when the screen is narrower than the lg breakpoint.

We have the Navbar.Toggle to display a toggle when the navbar is collapsed.

And Navbar.Collapse lets us display a collapsed navbar for narrow screens.

It’ll be expanded to the full navbar if the screen is within the lg breakpoint or higher.

Inside the Navbar.Collapse component, we have all the content for the navbar like the dropdown, links, and forms.

Navbar.Brand is displayed on the left side.

Conclusion

We can customize navbars with our own styling.

Also, we can make it responsive by adding a few components and props.