Individual links of the menu should we wrapped inside mj-navbar.
The "hamburger" feature only work on mobile device with all iOS mail client, for others mail clients the render is performed on an normal way, the links are displayed inline and the hamburger is not visible.
All the attributes prefixed with ico- help to customize the hamburger icon. They only work with the hamburger mode enabled.
<mjml> <mj-body> <mj-section background-color="#ef6451"> <mj-column> <mj-navbar base-url="https://mjml.io" hamburger="hamburger" ico-color="#ffffff"> <mj-navbar-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-navbar-link> <mj-navbar-link href="/try-it-live" color="#ffffff">Try it live</mj-navbar-link> <mj-navbar-link href="/templates" color="#ffffff">Templates</mj-navbar-link> <mj-navbar-link href="/components" color="#ffffff">Components</mj-navbar-link> </mj-navbar> </mj-column> </mj-section> </mj-body> </mjml>
As you can see, mj-navbar
consist of mj-navbar-link
element. Each mj-navbar-link
represents each link on the navbar.
Here is some useful list of attribute you can use on mj-navbar
element -
base-url
is the Base URL for the children components.hamburger
activate the hamburger navigation on mobile if the value is hamburger.align
Align content left/center/right.ico-color
color of the hamburger icon.ico-font-size
hamburger icon size (hamburger mode required). Default is 30px.Here is some useful list of attribute you can use on mj-navbar-item
element -
color
The text color.