Instructions on the markup to use in our Magento 2 Meganav module

meganav-markup.md

Meganav Markup

Our Meganav module requires some simple markup in order for it to function correctly.

Here is a basic example showing a single column of links:

<div>

    <!-- Heading with link and toggle -->
    <a href="heading.html" title="Heading">Heading<span class="toggle"></span></a>
    
    <!-- Sub-categories list -->
    <ul>
        <li><a href="link-01.html">Link One</a></li>
        <li><a href="link-02.html">Link Two</a></li>
        <li><a href="link-03.html">Link Three</a></li>
    </ul>
</div>

To add additional columns simply create multiple blocks of markup as per above.

Columns

Each column should be wrapped in a <div> tag.

If you want a column to span across multiple columns add a col-span class, e.g. <div class="col-span-3">.

Headings

If you would like the heading to be a link use an <a> tag with an href parameter. Otherwise use a <span> tag.

Example using a link:

<a href="heading.html" title="Heading">Heading</a>

Example using a <span> tag:

<span>Heading</span>

Sub-Categories Accordion Toggles

If the heading has a list of sub-categories you can add a toggle to open and close it.

The toggle consists of a <span> tag with a toggle class that adds a small 'plus' icon to the right of the heading.

A toggle should be added as the last element inside a heading tag.

Example:

<span>Heading<span class="toggle"></span></span>

Column Sections

A column can contain multiple sections. Simply add additional headings and lists.

Example:

<div>

    <!-- Section 1 -->
    <span>Heading One<span class="toggle"></span></span>
    <ul>
        <li><a href="link-01.html">Link One</a></li>
        <li><a href="link-02.html">Link Two</a></li>
        <li><a href="link-03.html">Link Three</a></li>
    </ul>

    <!-- Section 2 -->
    <span>Heading Two<span class="toggle"></span></span>
    <ul>
        <li><a href="link-04.html">Link Four</a></li>
        <li><a href="link-05.html">Link Five</a></li>
        <li><a href="link-06.html">Link Six</a></li>
    </ul>
</div>

Other Content

You can also add other content into a column, such as text, images and buttons. As with any other column, you can set it to span multiple columns.

Example:

<!-- Column spanning 3 columns -->
<div class="col-span-3">

    <!-- Paragraph text with link -->
    <p><strong>Big sale <a href="sale.html" title="Sale">here</a>!.</strong></p>
    
    <!-- Promotional image with link -->
    <p><a href="promotion.html" title="Promotion"><img src="image.jpg" alt="Promo Image" /></a></p>
    
    <!-- Button -->
    <a class="button-secondary" title="New Collection" href="new-collection.html">New Collection</a>
</div>