material-ui-responsive-nav

An easy-to-use component that allows you to add responsive navigation with minimum fuss.

Install

npm i material-ui-responsive-nav @material-ui/core

NOTE: This component requires Material-UI to work.

Usage

import React from "react"
import { MaterialUINav } from "material-ui-responsive-nav"
// you will need to import the icons from an external source to use with external links
import { Facebook, Twitter } from "mdi-material-ui"

const Layout = ({children}) => {

  const links = {
    internal: [
      {
        label: "Home",
        link: "/",
      },
      {
        label: "About",
        link: "/about",
      },
      {
        label: "Contact",
        link: "/contact",
      },
    ],
    external: [
      {
        label: "Facebook",
        icon: Facebook,
        link: "https://www.facebook.com",
      },
      {
        label: "Twitter",
        icon: Twitter,
        link: "https://www.twitter.com",
      },
    ],
  }

  return (
    <>
      <MaterialUINav
        global={{
          siteTitle: "My cool site",
          mobileBreakpoint: "xs",
        }}
        navbarConfig={{
          elevate: false,
        }}
        mobileMenuConfig={{
          slideTransition: true,
        }}
        links={links}
      />
      {children}
    </>
  )
}

API

links (required)

Property	Description	Type	Options	Default
internal	An array of internal links to include in the navigation	array	[ { label: string, link: string, navbarLinkProps: object (pass props to the Button component), mobileMenuProps: object (pass props to the ListItem component), mobileMenuTextProps: object (pass props to the ListItemText component) } ]	N/A
external	An array of external links to include in the navigation	array	[ { label: string, link: string, icon: node, navbarLinkProps: object (pass props to the IconButton component), mobileMenuProps: object (pass props to the IconButton component) } ]	N/A

global

Property	Description	Type	Options	Default
siteTitle	The title to show on the navbar and the mobile menu	string	N/A	"My site"
mobileBreakpoint	The point at which to display the mobile layout	string	"xs", "sm", "md", "lg", "xl"	"sm"

navbarConfig

Property	Description	Type	Options	Default
color	Background color of the navbar	string	"primary", "secondary", "transparent"	"primary"
fixed	Fix the navbar to the top of the screen	boolean	N/A	true
appBarProps	Pass props to the AppBar component	object	N/A	null
transparentAtTop	Make the background of the navbar transparent if at the top of the page.	boolean	N/A	false
elevate	Show a box shadow	boolean	N/A	true
shrinkOnScrollDown	Shrink the height of the navbar if not at the top of the page	boolean	N/A	true
shrinkTransitionDuration	Adjust the duration in seconds of the shrink (and grow) animation. shrinkOnScrollDown must be true for this to work.	number	N/A	0.5
logo	Add a component to display a logo	component	N/A	null
titleTypographyVariant	Adjust the typography variant for the site title	string	"h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "overline", "button", "caption"	"h5"
alignLinksRight	Change the alignment of internal links	boolean	N/A	true
additionalLinkSpacing	Add more space (in pixels) between internal links	number	N/A	0
disableTitleClick	Disables onClick functionality on the site title	boolean	N/A	false
titleOnClick	Change the onClick function	function	N/A	()=>window.open("/")
titleProps	Pass props to the Typography component	object	N/A	null
titleRightMargin	Adjust the right margin of the site title. Only works if alignLinksRight is false.	number	N/A	4
linksTextTransform	Change the case of the links	string	"uppercase", "lowercase", "capitalize"	"uppercase"
showTooltips	Show tooltips on external links	boolean	N/A	true
mobileMenuButtonProps	Pass props to the IconButton component	object	N/A	{}

mobileMenuConfig

Property	Description	Type	Options	Default
bgcolor	Background color of the mobile menu	string	"primary", "secondary", "error", "warning", "info", "success"	null
logo	Add a component to display a logo	component	N/A	null
showTitle	Show the siteTitle (defined in global)	boolean	N/A	true
titleTypographyVariant	Adjust the typography variant for the site title. showTitle must be true for this to work	string	"h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "overline", "button", "caption"	"h4"
titleProps	Pass props to to the Typography component	object	N/A	null
linksTextTransform	Change the case of the links	string	"uppercase", "lowercase", "capitalize"	"uppercase"
internalLinksProps	Pass props to the List component	object	N/A	{}
externalLinksProps	Pass props to the Box component	object	N/A	{}
externalLinksAdditionalSpacing	Add extra space to the bottom of the internal links	number	N/A	0
slideTransition	Open/close the mobile menu with a slide transition instead of the default fade transition	boolean	N/A	false
closeButtonProps	Pass props to the Fab component	object	N/A	{}

Contribute

This is one of the first components I have created. There is a lot of scope for improvement and I happily invite you to contribute!