Reactstrap — Navigation

Reactstrap is a version Bootstrap made for React.

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

In this article, we’ll look at how to add a navbar and nav with Reactstrap.

Basic Navbar

We can create a navbar with various components put together.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  NavbarText
} from "reactstrap";

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

const toggle = () => setIsOpen(!isOpen);

return (
    <div>
      <Navbar color="light" light expand="md">
        <NavbarBrand href="/">app</NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mr-auto" navbar>
            <NavItem>
              <NavLink href="/foo/">foo</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://example.com">example</NavLink>
            </NavItem>
            <UncontrolledDropdown nav inNavbar>
              <DropdownToggle nav caret>
                options
              </DropdownToggle>
              <DropdownMenu right>
                <DropdownItem>option 1</DropdownItem>
                <DropdownItem>option 2</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>reset</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
          <NavbarText>more text</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );
}

Narbar is the whole navbar container. We can change the color with the color prop.

light makes the color light.

expand has the breakpoint to expand the navbar to the full navbar.

NavbarBrand has the brand name or logo.

NavItem has the nav item

NavLink is a link on the navbar.

UncontrolledDropdown is a dropdown.

We need the nav and inNavbar props to make it fit within the navbar.

DropdownToggle has the dropdown toggle.

NavbarText has the text.

NavbarToggler has the toggle for the navbar menu.

We put them all in the Collapse component so that they collapse when the breakpoint is less than the one specified with expand .

NavbarToggler

NavbarToggler should be after the NavbarBrand so that it appears on the right.

We can flip the order to have it appear on the left.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink
} from "reactstrap";

export default function App() {
  const [collapsed, setCollapsed] = React.useState(true);

const toggleNavbar = () => setCollapsed(!collapsed);

return (
    <div>
      <Navbar color="faded" light>
        <NavbarBrand href="/" className="mr-auto">
          app
        </NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="/foo/">foo</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://example.com">GitHub</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

to add a navbar with the Navbar component.

Then we add the NavbarBrand and NavbarToggler win the order we want.

It takes an onClick prop to let us toggle the navbar by setting the collapsed state.

Nav

A Nav component is another component for navigation.

For instance, we can write:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav>
        <NavItem>
          <NavLink href="#">foo</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">bar</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">baz</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            disabled
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We have the Nav component with the NavItem and NavLink components inside it to add the links.

Also, we can just nest the NavLink with the Nav component by writing:

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, NavItem, NavLink } from "reactstrap";

export default function App() {
  return (
    <div>
      <Nav>
        <NavLink href="#">foo</NavLink>
        <NavLink href="#">bar</NavLink>
        <NavLink href="#">baz</NavLink>
        <NavLink disabled href="#">
          disabled
        </NavLink>
      </Nav>
    </div>
  );
}

The disabled prop disables the NavLink in both examples.

Conclusion

We can add navbars and navs easily with Reactstrap.

They’re responsive so they work with all screen sizes.