Reactstrap Navs

Bootstrap Navs component allows to create simple navigation. Navigation available in Bootstrap shares general markup and styles, from the base .nav class to the active and disabled states.
Learn how to use Bootstrap navigation from this documentation and navs examples to quickly and easily create elegant and flexible navs.

Nav pills

import React from "react";

// reactstrap components
import { NavItem, NavLink, Nav } from "reactstrap";

function Example() {
  const [selected, setSelected] = React.useState("selected1");
  return (
    <>
      <Nav
        className=" nav-fill flex-column flex-sm-row"
        id="tabs-text"
        pills
        role="tablist"
      >
        <NavItem>
          <NavLink
            aria-controls="tabs-text-1"
            aria-selected={selected === "selected1"}
            className={
              "mb-sm-3 mb-md-0 " + (selected === "selected1" ? "active" : "")
            }
            data-toggle="tab"
            href="#pablo"
            id="tabs-text-1-tab"
            onClick={(e) => {
              e.preventDefault();
              setSelected("selected1");
            }}
            role="tab"
          >
            UI/UX Design
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            aria-controls="tabs-text-2"
            aria-selected={selected === "selected2"}
            className={
              "mb-sm-3 mb-md-0 " + (selected === "selected2" ? "active" : "")
            }
            data-toggle="tab"
            href="#pablo"
            id="tabs-text-2-tab"
            onClick={(e) => {
              e.preventDefault();
              setSelected("selected2");
            }}
            role="tab"
          >
            Programming
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            aria-controls="tabs-text-3"
            aria-selected={selected === "selected3"}
            className={
              "mb-sm-3 mb-md-0 " + (selected === "selected3" ? "active" : "")
            }
            data-toggle="tab"
            href="#pablo"
            id="tabs-text-3-tab"
            onClick={(e) => {
              e.preventDefault();
              setSelected("selected3");
            }}
            role="tab"
          >
            Graphic
          </NavLink>
        </NavItem>
      </Nav>
    </>
  );
}

export default Example;

Circled nav pills

import React from "react";

// reactstrap components
import { NavItem, NavLink, Nav } from "reactstrap";

function Example() {
  const [selected, setSelected] = React.useState("selected1");
  return (
    <>
      <Nav className=" nav-pills-circle" id="tabs_2" pills role="tablist">
        <NavItem>
          <NavLink
            aria-controls="home"
            aria-selected={selected === "selected1"}
            className={selected === "selected1" ? "rounded-circle active" : ""}
            data-toggle="tab"
            href="#pablo"
            id="home-tab"
            onClick={(e) => {
              e.preventDefault();
              setSelected("selected1");
            }}
            role="tab"
          >
            <span className=" nav-link-icon d-block">
              <i className=" ni ni-atom"></i>
            </span>
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            aria-controls="profile"
            aria-selected={selected === "selected2"}
            data-toggle="tab"
            href="#pablo"
            id="profile-tab"
            className={selected === "selected2" ? "rounded-circle active" : ""}
            onClick={(e) => {
              e.preventDefault();
              setSelected("selected2");
            }}
            role="tab"
          >
            <span className=" nav-link-icon d-block">
              <i className=" ni ni-chat-round"></i>
            </span>
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            aria-controls="contact"
            aria-selected={selected === "selected3"}
            data-toggle="tab"
            href="#pablo"
            id="contact-tab"
            className={selected === "selected3" ? "rounded-circle active" : ""}
            onClick={(e) => {
              e.preventDefault();
              setSelected("selected3");
            }}
            role="tab"
          >
            <span className=" nav-link-icon d-block">
              <i className=" ni ni-cloud-download-95"></i>
            </span>
          </NavLink>
        </NavItem>
      </Nav>
    </>
  );
}

export default Example;

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.

Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

import React from "react";

// reactstrap components
import {
  Card,
  CardBody,
  NavItem,
  NavLink,
  Nav,
  TabContent,
  TabPane,
} from "reactstrap";

// Core Components

function Example() {
  const [hTabsIcons, setHTabsIcons] = React.useState("hTabsIcons-1");
  return (
    <>
      <div className="nav-wrapper">
        <Nav className="nav-fill flex-column flex-md-row" pills role="tablist">
          <NavItem>
            <NavLink
              className={
                "mb-sm-3 mb-md-0 " +
                (hTabsIcons === "hTabsIcons-1" ? "active" : "")
              }
              href="#pablo"
              onClick={(e) => {
                e.preventDefault();
                setHTabsIcons("hTabsIcons-1");
              }}
            >
              <i className="ni ni-cloud-upload-96 mr-2"></i>
              Home
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={
                "mb-sm-3 mb-md-0 " +
                (hTabsIcons === "hTabsIcons-2" ? "active" : "")
              }
              href="#pablo"
              onClick={(e) => {
                e.preventDefault();
                setHTabsIcons("hTabsIcons-2");
              }}
            >
              <i className="ni ni-bell-55 mr-2"></i>
              Profile
            </NavLink>
          </NavItem>
          <NavItem>
            <NavLink
              className={
                "mb-sm-3 mb-md-0 " +
                (hTabsIcons === "hTabsIcons-3" ? "active" : "")
              }
              href="#pablo"
              onClick={(e) => {
                e.preventDefault();
                setHTabsIcons("hTabsIcons-3");
              }}
            >
              <i className="ni ni-calendar-grid-58 mr-2"></i>
              Messages
            </NavLink>
          </NavItem>
        </Nav>
      </div>
      <Card className="shadow">
        <CardBody>
          <TabContent id="myTabContent" activeTab={hTabsIcons}>
            <TabPane tabId="hTabsIcons-1" role="tabpanel">
              <p className="description">
                Raw denim you probably haven't heard of them jean shorts Austin.
                Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                Mustache cliche tempor, williamsburg carles vegan helvetica.
                Reprehenderit butcher retro keffiyeh dreamcatcher synth.
              </p>
              <p className="description">
                Raw denim you probably haven't heard of them jean shorts Austin.
                Nesciunt tofu stumptown aliqua, retro synth master cleanse.
              </p>
            </TabPane>
            <TabPane tabId="hTabsIcons-2" role="tabpanel">
              <p className="description">
                Cosby sweater eu banh mi, qui irure terry richardson ex squid.
                Aliquip placeat salvia cillum iphone. Seitan aliquip quis
                cardigan american apparel, butcher voluptate nisi qui.
              </p>
            </TabPane>
            <TabPane tabId="hTabsIcons-3" role="tabpanel">
              <p className="description">
                Raw denim you probably haven't heard of them jean shorts Austin.
                Nesciunt tofu stumptown aliqua, retro synth master cleanse.
                Mustache cliche tempor, williamsburg carles vegan helvetica.
                Reprehenderit butcher retro keffiyeh dreamcatcher synth.
              </p>
            </TabPane>
          </TabContent>
        </CardBody>
      </Card>
    </>
  );
}

export default Example;

Just Icons

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.

Dramatically visualize customer directed convergence without revolutionary ROI.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.

Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.

Dynamically innovate resource-leveling customer service for state of the art customer service.

import React from "react";

// reactstrap components
import {
  Card,
  NavItem,
  NavLink,
  Nav,
  TabContent,
  TabPane,
  Row,
  Col,
} from "reactstrap";

// Core Components

function Example() {
  const [hTabs3, setHTabs3] = React.useState("hTabs3-3");
  const [vTabs3, setVTabs3] = React.useState("vTabs3-1");
  return (
    <>
      <Row>
        <Col className="mb-5" md="6">
          <Row>
            <Col md="3">
              <Nav
                className="nav-pills-warning nav-pills-circle mb-3"
                pills
                role="tablist"
              >
                <NavItem>
                  <NavLink
                    className={vTabs3 === "vTabs3-1" ? "active" : ""}
                    href="#pablo"
                    onClick={(e) => {
                      e.preventDefault();
                      setVTabs3("vTabs3-1");
                    }}
                  >
                    <span className="nav-link-icon d-block">
                      <i className="ni ni-atom"></i>
                    </span>
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    className={vTabs3 === "vTabs3-2" ? "active" : ""}
                    href="#pablo"
                    onClick={(e) => {
                      e.preventDefault();
                      setVTabs3("vTabs3-2");
                    }}
                  >
                    <span className="nav-link-icon d-block">
                      <i className="ni ni-chat-round"></i>
                    </span>
                  </NavLink>
                </NavItem>
              </Nav>
            </Col>
            <Col md="8">
              <TabContent activeTab={vTabs3}>
                <TabPane tabId="vTabs3-1">
                  <p className="description">
                    Collaboratively administrate empowered markets via
                    plug-and-play networks. Dynamically procrastinate B2C users
                    after installed base benefits. <br></br>
                    <br></br>
                    Dramatically visualize customer directed convergence without
                    revolutionary ROI.
                  </p>
                </TabPane>
                <TabPane tabId="vTabs3-2">
                  <p className="description">
                    Efficiently unleash cross-media information without
                    cross-media value. Quickly maximize timely deliverables for
                    real-time schemas. <br></br>
                    <br></br>
                    Dramatically maintain clicks-and-mortar solutions without
                    functional solutions.
                  </p>
                </TabPane>
              </TabContent>
            </Col>
          </Row>
        </Col>
        <Col md="6">
          <Nav
            className="nav-pills-success nav-pills-circle mb-3"
            pills
            role="tablist"
          >
            <NavItem>
              <NavLink
                className={hTabs3 === "hTabs3-1" ? "active" : ""}
                href="#pablo"
                onClick={(e) => {
                  e.preventDefault();
                  setHTabs3("hTabs3-1");
                }}
              >
                <span className="nav-link-icon d-block">
                  <i className="ni ni-atom"></i>
                </span>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                className={hTabs3 === "hTabs3-2" ? "active" : ""}
                href="#pablo"
                onClick={(e) => {
                  e.preventDefault();
                  setHTabs3("hTabs3-2");
                }}
              >
                <span className="nav-link-icon d-block">
                  <i className="ni ni-chat-round"></i>
                </span>
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                className={hTabs3 === "hTabs3-3" ? "active" : ""}
                href="#pablo"
                onClick={(e) => {
                  e.preventDefault();
                  setHTabs3("hTabs3-3");
                }}
              >
                <span className="nav-link-icon d-block">
                  <i className="ni ni-cloud-download-95"></i>
                </span>
              </NavLink>
            </NavItem>
          </Nav>
          <Card className="card-plain">
            <TabContent className="tab-space" activeTab={hTabs3}>
              <TabPane tabId="hTabs3-1">
                <p className="description">
                  Collaboratively administrate empowered markets via
                  plug-and-play networks. Dynamically procrastinate B2C users
                  after installed base benefits. <br></br>
                  <br></br>
                  Dramatically visualize customer directed convergence without
                  revolutionary ROI.
                </p>
              </TabPane>
              <TabPane tabId="hTabs3-2">
                <p className="description">
                  Efficiently unleash cross-media information without
                  cross-media value. Quickly maximize timely deliverables for
                  real-time schemas. <br></br>
                  <br></br>
                  Dramatically maintain clicks-and-mortar solutions without
                  functional solutions.
                </p>
              </TabPane>
              <TabPane tabId="hTabs3-3">
                <p className="description">
                  Completely synergize resource taxing relationships via premier
                  niche markets. Professionally cultivate one-to-one customer
                  service with robust ideas. <br></br>
                  <br></br>
                  Dynamically innovate resource-leveling customer service for
                  state of the art customer service.
                </p>
              </TabPane>
            </TabContent>
          </Card>
        </Col>
      </Row>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.