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.