Nextjs Core Navbars

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 FREE

AdminNavbar

import React from "react";

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

// Core Components
import AdminNavbar from "components/Navbars/AdminNavbar.js";

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

export default Example;

AuthNavbar

import React from "react";

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

// Core Components
import AuthNavbar from "components/Navbars/AuthNavbar.js";

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

export default Example;

NOTE

You should note, that none of the above components are not 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.

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 for admin and here for auth.

Example PRO

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 for admin, here for auth and here for index.

AdminNavbar

import React from "react";
import { useRouter } from "next/router";
// core components
import AdminNavbar from "components/Navbars/AdminNavbar.js";

import routes from "routes.js";

function Admin(props) {
  const [sidenavOpen, setSidenavOpen] = React.useState(true);
  // used for checking current route
  const router = useRouter();
  const getBrandText = () => {
    for (let i = 0; i < routes.length; i++) {
      if (router.route.indexOf(routes[i].layout + routes[i].path) !== -1) {
        return routes[i].name;
      }
    }
    return "Brand";
  };
  // toggles collapse between mini sidenav and normal
  const toggleSidenav = (e) => {
    if (document.body.classList.contains("g-sidenav-pinned")) {
      document.body.classList.remove("g-sidenav-pinned");
      document.body.classList.add("g-sidenav-hidden");
    } else {
      document.body.classList.add("g-sidenav-pinned");
      document.body.classList.remove("g-sidenav-hidden");
    }
    setSidenavOpen(!sidenavOpen);
  };
  const getNavbarTheme = () => {
    return router.route.indexOf("admin/alternative-dashboard") === -1
      ? "dark"
      : "light";
  };
  return (
    <>
      <AdminNavbar
        {...props}
        theme={getNavbarTheme()}
        toggleSidenav={toggleSidenav}
        sidenavOpen={sidenavOpen}
        brandText={getBrandText()}
      />
    </>
  );
}

export default Admin;

Props

AdminNavbar.defaultProps = {
  toggleSidenav: () => {},
  sidenavOpen: false,
  theme: "dark",
};
AdminNavbar.propTypes = {
  toggleSidenav: PropTypes.func,
  sidenavOpen: PropTypes.bool,
  theme: PropTypes.oneOf(["dark", "light"]),
};

AuthNavbar

import React from "react";

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

// Core Components
import AuthNavbar from "components/Navbars/AuthNavbar.js";

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

export default Example;

NOTE

You should note, that none of the above components are not 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.

IndexNavbar

import React from "react";

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

// Core Components
import IndexNavbar from "components/Navbars/IndexNavbar.js";

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

export default Example;

NOTE

You should note, that none of the above components are not 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.