JSPM

mjml-navbar

3.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 783709
  • Score
    100M100P100Q270355F
  • 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 full width section for navigation

<mjml>
  <mj-body>
    <mj-container>
      <mj-navbar background-color="#ef6451">
        <mj-column width="20%">
          <mj-image width="150px" src="https://mjml.io/assets/img/logo-white-small.png"></mj-image>
        </mj-column>
        <mj-column width="80%">
          <mj-inline-links base-url="https://mjml.io">
            <mj-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-link>
            <mj-link href="/try-it-live" color="#ffffff">Try it live</mj-link>
            <mj-link href="/templates" color="#ffffff">Templates</mj-link>
            <mj-link href="/components" color="#ffffff">Components</mj-link>
            <mj-link href="/documentation" color="#ffffff">Documentation</mj-link>
          </mj-inline-links>
        </mj-column>
      </mj-navbar>
    </mj-container>
  </mj-body>
</mjml>

sexy

attribute unit description default value
full-width string make the section full-width n/a
border string css border format none
border-bottom string css border format n/a
border-left string css border format n/a
border-right string css border format n/a
border-top string css border format n/a
border-radius px border radius n/a
background-color color section color n/a
background-url url background url n/a
background-repeat string css background repeat repeat
background-size percent/px css background size auto
vertical-align string css vertical-align top
text-align string css text-align center
padding px supports up to 4 parameters 10px 25px
padding-top px section top offset n/a
padding-bottom px section bottom offset n/a
padding-left px section left offset n/a
padding-right px section right offset n/a

To display some links horizontally

Standard Desktop:

Standard Mobile:

Mode hamburger enabled:

<mjml>
  <mj-body>
    <mj-container>
      <mj-navbar background-color="#ef6451">
        <mj-column width="20%">
          <mj-image width="150px" src="https://mjml.io/assets/img/logo-white-small.png"></mj-image>
        </mj-column>
        <mj-column width="80%">
          <mj-inline-links base-url="https://mjml.io">
            <mj-link href="/gettings-started-onboard" color="#ffffff">Getting started</mj-link>
            <mj-link href="/try-it-live" color="#ffffff">Try it live</mj-link>
            <mj-link href="/templates" color="#ffffff">Templates</mj-link>
            <mj-link href="/components" color="#ffffff">Components</mj-link>
            <mj-link href="/documentation" color="#ffffff">Documentation</mj-link>
          </mj-inline-links>
        </mj-column>
      </mj-navbar>
    </mj-container>
  </mj-body>
</mjml>

sexy

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) Ubuntu, Helvetica, Arial, sans-serif
ico-font-family string hamburger icon font (only on hamburger mode) 30px
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 
<mjml>
  <mj-body>
    <mj-container>
      <!-- Navbar (see component mj-navbar) -->
      <mj-navbar>
        <mj-column>
          <!-- Wrapper (see component mj-inline-links) -->
          <mj-inline-links base-url="https://mjml.io">
            <mj-link href="/getting-started-onboard">Getting started</mj-link>
            <mj-link href="/try-it-live">Try it live</mj-link>
            <mj-link href="/documentation">Documentation</mj-link>
          </mj-inline-links>
        </mj-column>
      </mj-navbar>
    </mj-container>
  </mj-body>
</mjml>

Displays a horizontal navbar.

sexy

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