Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
mjml-navbar
Advanced tools
Readme
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>
Individual links of the menu should be wrapped inside mj-navbar.
Standard Desktop:
Standard Mobile:
Mode hamburger enabled:
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.
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 |
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. `mj-navbar-link` is an "ending tag", which means it can contain HTML code which will be left as it is, so it can contain HTML tags with attributes, but it cannot contain other MJML components. More information about ending tags in this section.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 |
letter-spacing | px,em | letter-spacing | n/a |
line-height | px | space between the lines | 22px |
padding | px | supports up to 4 parameters | 15px 10px |
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 |
FAQs
mjml-navbar
The npm package mjml-navbar receives a total of 459,655 weekly downloads. As such, mjml-navbar popularity was classified as popular.
We found that mjml-navbar demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.