Reactstrap Core Navbars

Pro Component

A Navbar component is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size.

Description

We’ve made the following navbar components using various reactstrap components, and Bootstrap classes and also some custom scss/css classes.

Example

Since these components were created with the thought of expanding on a whole screen, you should also take a look at our live preview, to see it on full width here.

DemoNavbar

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import DemoNavbar from "components/navbars/DemoNavbar.js";

function Example() {
  return (
    <>
      <DemoNavbar />
    </>
  );
}

export default Example;

DemoNavbar Props

DemoNavbar.defaultProps = {
  type: "dark",
};

DemoNavbar.propTypes = {
  type: PropTypes.oneOf(["dark", "transparent", "primary", "white"]),
};

NavbarDanger

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import NavbarDanger from "components/navbars/NavbarDanger.js";

function Example() {
  return (
    <>
      <NavbarDanger />
    </>
  );
}

export default Example;

NavbarDefault

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import NavbarDefault from "components/navbars/NavbarDefault.js";

function Example() {
  return (
    <>
      <NavbarDefault />
    </>
  );
}

export default Example;

NavbarInfo

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import NavbarInfo from "components/navbars/NavbarInfo.js";

function Example() {
  return (
    <>
      <NavbarInfo />
    </>
  );
}

export default Example;

NavbarPrimary

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import NavbarPrimary from "components/navbars/NavbarPrimary.js";

function Example() {
  return (
    <>
      <NavbarPrimary />
    </>
  );
}

export default Example;

NavbarSuccess

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import NavbarSuccess from "components/navbars/NavbarSuccess.js";

function Example() {
  return (
    <>
      <NavbarSuccess />
    </>
  );
}

export default Example;

NavbarWarning

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import NavbarWarning from "components/navbars/NavbarWarning.js";

function Example() {
  return (
    <>
      <NavbarWarning />
    </>
  );
}

export default Example;

Note

You should note, that none of the bellow components are dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.