mj-navbar
Displays a menu for navigation with an optional hamburger mode for mobile devices.
<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>
mj-navbar
Individual links of the menu should we wrapped inside mj-navbar.
Standard Desktop:
Standard Mobile:
Mode hamburger enabled:
ico- help to customize the hamburger icon. They only work with the hamburger mode enabled.
| attribute | unit | description | default value |
|---|---|---|---|
| align | string | align content left/center/right | center |
| base url | string | base url for children components | n/a |
| css-class | string | class name, added to the root HTML element created | n/a |
| hamburger | string | activate the hamburger navigation on mobile if the value is hamburger | n/a |
| ico-align | string | hamburger icon alignment, left/center/right (hamburger mode required) | center |
| ico-close | ASCII code decimal | char code for a custom close icon (hamburger mode required) | 8855 |
| ico-color | color format | hamburger icon color (hamburger mode required) | #000000 |
| ico-font-family | string | hamburger icon font (only on hamburger mode) | Ubuntu, Helvetica, Arial, sans-serif |
| ico-font-size | px | hamburger icon size (hamburger mode required) | 30px |
| ico-line-height | px | hamburger icon line height (hamburger mode required) | 30px |
| ico-open | ASCII code decimal | char code for a custom open icon (hamburger mode required) | 9776 |
| ico-padding | px | hamburger icon padding, supports up to 4 parameters (hamburger mode required) | 10px |
| ico-padding-bottom | px | hamburger icon bottom offset (hamburger mode required) | 10px |
| ico-padding-left | px | hamburger icon left offset (hamburger mode required) | 10px |
| ico-padding-right | px | hamburger icon right offset (hamburger mode required) | 10px |
| ico-padding-top | px | hamburger icon top offset (hamburger mode required) | 10px |
| ico-text-decoration | string | hamburger icon text decoration none/underline/overline/line-through (hamburger mode required) | none |
| ico-text-transform | string | hamburger icon text transformation none/capitalize/uppercase/lowercase (hamburger mode required) | none |
mj-navbar-link
This component should be used to display an individual link in the navbar.
The mj-navbar-link component must be used inside a mj-navbar component only.| attribute | unit | description | default value |
|---|---|---|---|
| color | color | text color | #000000 |
| css-class | string | class name, added to the root HTML element created | n/a |
| font-family | string | font | Ubuntu, Helvetica, Arial, sans-serif |
| font-size | px | text size | 13px |
| font-style | string | normal/italic/oblique | n/a |
| font-weight | number | text thickness | n/a |
| href | string | link to redirect to on click | n/a |
| line-height | px | space between the lines | 22px |
| padding | px | supports up to 4 parameters | 10px 25px |
| padding-bottom | px | bottom offset | n/a |
| padding-left | px | left offset | n/a |
| padding-right | px | right offset | n/a |
| padding-top | px | top offset | n/a |
| rel | string | specify the rel attribute | n/a |
| target | string | link target on click | n/a |
| text-decoration | string | underline/overline/none | n/a |
| text-transform | string | capitalize/uppercase/lowercase/none | uppercase |