Nextjs Navs

Our Nextjs Navs component allows to create simple navigation. Navigation available in Nextjs shares general markup and styles, from the base .nav class to the active and disabled states.
Learn how to use Nextjs 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;

Props

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

Props

If you want to see more examples and properties please check the official Material-UI Documentation.