MobileMenu

Layout Component
1import { 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.

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.

PropDescription
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:

PropDescription
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:

1import {
2 Layout,
3 Header,
4 Navbar,
5 MobileMenu,
6 Content,
7 Main,
8 Footer,
9} from 'maker-ui'
10
11import { myMenu } from './config'
12
13/** Renders a MobileMenu with a pre-formatted, collapsible menu */
14
15const MyLayout = ({ children, location }) => (
16 <Layout>
17 <Header>
18 <Navbar menu={myMenu} />
19 <MobileMenu menu={myMenu} pathname={location.pathname} />
20 </Header>
21 <Content>
22 <Main>{children}</Main>
23 </Content>
24 <Footer />
25 </Layout>
26)
27
28/** Renders a MobileMenu with custom children instead
29 * of the default menu */
30
31const MyOtherLayout = ({ children, location }) => (
32 <Layout>
33 <Header>
34 <Navbar menu={myMenu} />
35 <MobileMenu>Completely custom menu content</MobileMenu>
36 </Header>
37 <Content>
38 <Main>{children}</Main>
39 </Content>
40 <Footer />
41 </Layout>
42)
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