MobileMenu

Layout Component

import { MobileMenu } from 'maker-ui'

The MobileMenu component renders a responsive menu for mobile navigation. It comes in a few common styles and can be customized to your specific design needs.

This component is only visible on mobile screen sizes unless you are using a minimal desktop nav type. You can activate it via the Navbar's MenuButton or the useMenu hook.

Menus vs Children#

The MobileMenu displays a pre-built menu component or a custom child.

In many cases, you will want your mobile nav to display a list of links similar to your Navbar's primary menu. You can use the menu prop to supply a compatible MakerMenu array. Then you can use the header and footer props to add custom components above and below your menu.

If you prefer to create the MobileMenu's inner contents from scratch, ignore these props and just wrap MobileMenu around a child component.

The menu prop supports nested / collapsible submenus just like the Navbar.

Layouts#

Use mobileMenu.transition and mobileMenu.width in Maker UI Options (or their prop overrides) to determine the style and layout of your MobileMenu.

Props#

In addition to the props below, MobileMenu supports id and className for custom selectors.

Prop	Description
background	Type string \| string[] Overrides the MobileMenu's default `--color-bg_mobileMenu` background value that you can set in Maker UI options.
center	Type boolean If true, this will center the inner contents of your MobileMenu with flexbox positioning. Defaultfalse
closeButton	Type \| React.ReactNode \| ((isOpen?: boolean, attributes?: object) => React.ReactNode) Overrides `mobileMenu.closeButton` from Maker UI options.
closeButtonPosition	Type 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' Determines where to position the MobileMenu's default close button while activated. Default'top-right'
css	Type object Styles from the `css` prop will be applied to the MobileMenu container.
footer	Type React.ReactElement A custom component that is inserted into the MobileMenu below its main content (menu or children)
header	Type React.ReactElement A custom component that is inserted into the MobileMenu below its main content (menu or children)
menu	Type MakerMenu If you supply a MakerMenu array to this prop, the MobileMenu will render an accessible menu complete with nested dropdowns.
pathname	Type string Supply your app's current location.pathname as a string, allowing the menu to add a `.current` class and `aria-current` to the active menu item. This feature is only useful if you use the `menu` prop.
transition	Type 'fade' \| 'fade-up' \| 'fade-down' \| 'slide-left' \| 'slide-right' Overrides `mobileMenu.transition` that you can set in Maker UI options.
width	Type string \| number \| (string \| number)[] Overrides `mobileMenu.width` that you can set in Maker UI options.

The override props are designed for conditional use cases or runtime logic. Whenever possible, use Maker UI options instead.

Maker UI Options#

Your options configuration has a mobileMenu object with the following properties:

Prop	Description
width	Type string \| number \| (string \| number)[] The width of the mobile menu when active. This can be a responsive array. For `transition` types of `fade`, `fade-up` and `fade-down`, the MobileMenu width will automatically be set to `100%`. Default70vw
transition
visibleOnDesktop
closeButton
showCloseButton
closeOnBlur
closeOnRouteChange
errorBoundary

Usage#

The MobileMenu should always be nested inside Header next to the Navbar. There are two common ways to use the MobileMenu:

import {
  Layout,
  Header,
  Navbar,
  MobileMenu,
  Content,
  Main,
  Footer,
} from 'maker-ui'

import { myMenu } from './config'

/** Renders a MobileMenu with a pre-formatted, collapsible menu */

const MyLayout = ({ children, location }) => (
  <Layout>
    <Header>
      <Navbar menu={myMenu} />
      <MobileMenu menu={myMenu} pathname={location.pathname} />
    </Header>
    <Content>
      <Main>{children}</Main>
    </Content>
    <Footer />
  </Layout>
)

/** Renders a MobileMenu with custom children instead
 * of the default menu */

const MyOtherLayout = ({ children, location }) => (
  <Layout>
    <Header>
      <Navbar menu={myMenu} />
      <MobileMenu>Completely custom menu content</MobileMenu>
    </Header>
    <Content>
      <Main>{children}</Main>
    </Content>
    <Footer />
  </Layout>
)

This example assumes your root layout has access to a location prop. In frameworks like Next.js and Gatsby, you can often get these values from router hooks.

Usage with SideNav#

If you use a SideNav layout, you can choose to set the SideNav as your primary mobile menu.

To do so, skip adding MobileMenu to your layout tree and set sideNav.isPrimaryMobileNav to true in Maker UI Options. This will ensure the useMenu hook and the Navbar's MenuButton trigger your SideNav instead of the MobileMenu.

To see it in action, resize this website on desktop and try clicking the hamburger button.

Contents