JSPM

mjml-navbar

4.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 783709
  • Score
    100M100P100Q270004F
  • License MIT

mjml-navbar

Package Exports

  • mjml-navbar

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

mjml-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

mjml-navbar

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

Standard Desktop:

Standard Mobile:

Mode hamburger enabled:

attribute unit description default value
base url string base url for children components n/a
hamburger string activate the hamburger navigation on mobile if the value is hamburger n/a
align string align content left/center/right center
ico-open ASCII code decimal char code for a custom open icon (hamburger mode required) 9776
ico-close ASCII code decimal char code for a custom close icon (hamburger mode required) 8855
ico-padding px hamburger icon padding, supports up to 4 parameters (hamburger mode required) 10px
ico-padding-top px hamburger icon top offset (hamburger mode required) 10px
ico-padding-right px hamburger icon right offset (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-align string hamburger icon alignment, left/center/right (hamburger mode required) center
ico-color color format hamburger icon color (hamburger mode required) #000000
ico-font-size px hamburger icon size (hamburger mode required) 30px
ico-font-family string hamburger icon font (only on hamburger mode) Ubuntu, Helvetica, Arial, sans-serif
ico-text-transform string hamburger icon text transformation none/capitalize/uppercase/lowercase (hamburger mode required) none
ico-text-decoration string hamburger icon text decoration none/underline/overline/line-through (hamburger mode required) none
ico-line-height px hamburger icon line height (hamburger mode required) 30px

This component should be used to display an individual link in the navbar.

attribute unit description default value
color color text color #000000
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
line-height px space between the lines 22px
text-decoration string underline/overline/none n/a
text-transform string capitalize/uppercase/lowercase/none uppercase
padding px supports up to 4 parameters 10px 25px
padding-top px top offset n/a
padding-bottom px bottom offset n/a
padding-left px left offset n/a
padding-right px right offset n/a
rel string specify the rel attribute n/a
href string link to redirect to on click n/a
target string link target on click n/a