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.