JSPM

mjml-navbar

5.0.0-alpha.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 783709
  • Score
    100M100P100Q269797F
  • License MIT

mjml-navbar

Package Exports

  • mjml-navbar
  • mjml-navbar/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mjml-navbar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mj-navbar

example desktop width 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>

try it live

mj-navbar

Individual links of the menu should be wrapped inside mj-navbar.

Standard Desktop:

example desktop width navbar

Standard Mobile:

example mobile width navbar

Mode hamburger enabled:

hamburger mode animation shows menu expansion after clicking hamburger icon

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.

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