Navigation

Styles

You will find all the styles for these components in
src/assets/jss/nextjs-material-kit/components/headerStyle.js
src/assets/jss/nextjs-material-kit/components/headerLinksStyle.js.

The classic Material UI Appbar was restyled.

You will find this component in src/components/Header/Header.jsx. In this component there is just the structure of the navbar. The links can be found in src/components/Header/HeaderLinks.jsx. We've done this because we want our users to be able to add their own links easily.

You can choose between 9 colors by using the color property.

If this property is not set, then the Appbar will be white.

Header.defaultProps = {
  color: "white"
};

Header.propTypes = {
  color: PropTypes.oneOf([
    "primary",
    "info",
    "success",
    "warning",
    "danger",
    "transparent",
    "white",
    "rose",
    "dark"
  ]),
  rightLinks: PropTypes.node,
  leftLinks: PropTypes.node,
  brand: PropTypes.string,
  fixed: PropTypes.bool,
  absolute: PropTypes.bool,
  // this will cause the sidebar to change the color from
  // this.props.color (see above) to changeColorOnScroll.color
  // when the window.pageYOffset is heigher or equal to
  // changeColorOnScroll.height and then when it is smaller than
  // changeColorOnScroll.height change it back to
  // this.props.color (see above)
  changeColorOnScroll: PropTypes.shape({
    height: PropTypes.number.isRequired,
    color: PropTypes.oneOf([
      "primary",
      "info",
      "success",
      "warning",
      "danger",
      "transparent",
      "white",
      "rose",
      "dark"
    ]).isRequired
  })
};

Props

Please check out the official material-ui documentation.