React Development with the Shards React Library — Navbar

Shards React is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Nav

The Nav component lets us build navigation components.

For instance, we can write:

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

export default function App() {
  return (
    <div className="App">
      <Nav>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We add NavItem s and NavLink s inside the Nav to add links for our app.

To display them as tabs, we can add the tabs prop:

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

export default function App() {
  return (
    <div className="App">
      <Nav tabs>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

And we can add the pills prop to display items as pills:

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

export default function App() {
  return (
    <div className="App">
      <Nav pills>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We can make the navbar fill the width of the screen with the fill prop:

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

export default function App() {
  return (
    <div className="App">
      <Nav fill>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

We can add equal width nav elements with the justified prop:

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

export default function App() {
  return (
    <div className="App">
      <Nav justified>
        <NavItem>
          <NavLink active href="#">
            Active
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink href="#">Link</NavLink>
        </NavItem>
        <NavItem>
          <NavLink disabled href="#">
            Disabled Link
          </NavLink>
        </NavItem>
      </Nav>
    </div>
  );
}

Navbar

We can add a navbar into our app with the Navbar component.

For instance, we can write:

import React, { useState } from "react";
import { faSearch } from "[@fortawesome/free-solid-svg-icons](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Ffortawesome%2Ffree-solid-svg-icons "Twitter profile for @fortawesome/free-solid-svg-icons")";
import { FontAwesomeIcon } from "[@fortawesome/react-fontawesome](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Ffortawesome%2Freact-fontawesome "Twitter profile for @fortawesome/react-fontawesome")";
import {
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  FormInput,
  Collapse
} from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";

export default function App() {
  const [dropdownOpen, setDropdownOpen] = useState();
  const [collapseOpen, setCollapseOpen] = useState();

  const toggleNavbar = () => {
    setCollapseOpen((o) => !o);
  };

  const toggleDropdown = () => {
    setDropdownOpen((o) => !o);
  };

  return (
    <div className="App">
      <Navbar type="dark" theme="primary" expand="md">
        <NavbarBrand href="#">Shards React</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} />

        <Collapse open={collapseOpen} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink active href="#">
                Active
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#" disabled>
                Disabled
              </NavLink>
            </NavItem>
            <Dropdown open={dropdownOpen} toggle={toggleDropdown}>
              <DropdownToggle nav caret>
                Dropdown
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem>Action</DropdownItem>
                <DropdownItem>Another action</DropdownItem>
                <DropdownItem>Something else here</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Nav>

          <Nav navbar className="ml-auto">
            <InputGroup size="sm" seamless>
              <InputGroupAddon type="prepend">
                <InputGroupText>
                  <FontAwesomeIcon icon={faSearch} />
                </InputGroupText>
              </InputGroupAddon>
              <FormInput className="border-0" placeholder="Search..." />
            </InputGroup>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

We add the Collapse component into the Navbar to show it when we hit the sm breakpoint.

We have to add the navbar prop to the Collapse and Nav to make it fit in the navbar.

The Collapse component will be expanded when we hit the md breakpoint or higher.

The bottom Nav component has an InputGroup that’s displayed when we see regardless of screen size.

Conclusion

We can add navbars into our React app with Shards React.