MobileMenu
Layout Component1import { 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.
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[] --color-bg_mobileMenu background value that you can set in Maker UI options. |
center | Type boolean Defaultfalse |
closeButton | Type | React.ReactNode | ((isOpen?: boolean, attributes?: object) => React.ReactNode) mobileMenu.closeButton from Maker UI options. |
closeButtonPosition | Type 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' Default'top-right' |
css | Type object css prop will be applied to the MobileMenu container. |
footer | Type React.ReactElement |
header | Type React.ReactElement |
menu | Type MakerMenu |
pathname | Type string .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' mobileMenu.transition that you can set in Maker UI options. |
width | Type string | number | (string | number)[] mobileMenu.width that you can set in Maker UI options. |
Maker UI Options#
Your options configuration has a mobileMenu
object with the following properties:
Prop | Description |
---|---|
width | Type string | number | (string | number)[] 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'1011import { myMenu } from './config'1213/** Renders a MobileMenu with a pre-formatted, collapsible menu */1415const 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)2728/** Renders a MobileMenu with custom children instead29 * of the default menu */3031const 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)
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.