Nextjs Core Navbars

Pro Component

This is the top navigation of our demo app.

AdminNavbar

In the free version, it is called simply Navbar.

Styles

You will find the styles for this component in assets/jss/nextjs-material-dashboard-pro/components/headerStyle.js and assets/jss/nextjs-material-dashboard/components/headerStyle.js.

Example

For the PRO version, please check:
- The RTL Support Page
- The Dashboard Page
For the FREE version, please check The Dashboard Page

Props

Header.propTypes = {
  color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]),
  rtlActive: PropTypes.bool
};

AdminNavbarLinks

Styles

You will find the styles for this component in assets/jss/nextjs-material-dashboard/components/headerLinksStyle.js.

Example

For the PRO version, please check:
- The RTL Support Page
- The Dashboard Page
For the FREE version, please check The Dashboard Page

Props pro

AdminNavbarLinks.propTypes = {
  // uses rtl names instead of english ones
  rtlActive: PropTypes.bool,
};

RTLNavbarLinks free

Styles

You will find the styles for this component in assets/jss/nextjs-material-dashboard/components/rtlHeaderLinksStyle.js.

Example

For the FREE version, please check The RTL Support Page

AuthNavbar pro

Styles

You will find the styles for this component in assets/jss/nextjs-material-dashboard-pro/components/authNavbarStyle.js.

Example

For the PRO version, please check The Pricing Page

Props

AuthNavbar.propTypes = {
  color: PropTypes.oneOf(["primary", "info", "success", "warning", "danger"]),
  brandText: PropTypes.string,
};

Props

If you wish to change these component, you should also check the following props from the base Material-UI components: