Vebego Component Library

Mega menu 

<!-- Classic -->
<div class="selector-sub mega-menu mega-menu--classic">
        <ul>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-ferris-wheel   "></i>

                    <div>
                        <p class="atm-heading h6">Recreation</p>
                        <div class="atm-paragraph">
                            <p>Holiday parks, Theme parks and more.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-book   "></i>

                    <div>
                        <p class="atm-heading h6">Education</p>
                        <div class="atm-paragraph">
                            <p>From primary schools till universities.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-bolt-lightning   "></i>

                    <div>
                        <p class="atm-heading h6">Industry</p>
                        <div class="atm-paragraph">
                            <p>Farmaceutische , High Care and Voedingsmiddelenindustrie</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-circle-play   "></i>

                    <div>
                        <p class="atm-heading h6">Transport and logistics</p>
                        <div class="atm-paragraph">
                            <p>Public transport and airports</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-ferris-wheel   "></i>

                    <div>
                        <p class="atm-heading h6">Offices</p>
                        <div class="atm-paragraph">
                            <p>The latest industry news, updates and info.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-book   "></i>

                    <div>
                        <p class="atm-heading h6">Government</p>
                        <div class="atm-paragraph">
                            <p>The latest industry news, updates and info.</p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <footer>
            <p>Do you need advice right now? Call <a href="#">+31 (0)88 099 08 90</a></p>
        </footer>
    </div>


<!-- Grid -->
<div class="selector-sub mega-menu mega-menu--grid">
        <ul>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-ferris-wheel   "></i>

                    <div>
                        <p class="atm-heading h6">Recreation</p>
                        <div class="atm-paragraph">
                            <p>Holiday parks, Theme parks and more.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-book   "></i>

                    <div>
                        <p class="atm-heading h6">Education</p>
                        <div class="atm-paragraph">
                            <p>From primary schools till universities.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-bolt-lightning   "></i>

                    <div>
                        <p class="atm-heading h6">Industry</p>
                        <div class="atm-paragraph">
                            <p>Farmaceutische , High Care and Voedingsmiddelenindustrie</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-circle-play   "></i>

                    <div>
                        <p class="atm-heading h6">Transport and logistics</p>
                        <div class="atm-paragraph">
                            <p>Public transport and airports</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-ferris-wheel   "></i>

                    <div>
                        <p class="atm-heading h6">Offices</p>
                        <div class="atm-paragraph">
                            <p>The latest industry news, updates and info.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-book   "></i>

                    <div>
                        <p class="atm-heading h6">Government</p>
                        <div class="atm-paragraph">
                            <p>The latest industry news, updates and info.</p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <footer>
            <p>Do you need advice right now? Call <a href="#">+31 (0)88 099 08 90</a></p>
        </footer>
    </div>


<!-- Marketing -->
<div class="selector-sub mega-menu mega-menu--marketing">
        <ul>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-ferris-wheel   "></i>

                    <div>
                        <p class="atm-heading h6">Recreation</p>
                        <div class="atm-paragraph">
                            <p>Holiday parks, Theme parks and more.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-book   "></i>

                    <div>
                        <p class="atm-heading h6">Education</p>
                        <div class="atm-paragraph">
                            <p>From primary schools till universities.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-bolt-lightning   "></i>

                    <div>
                        <p class="atm-heading h6">Industry</p>
                        <div class="atm-paragraph">
                            <p>Farmaceutische , High Care and Voedingsmiddelenindustrie</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-circle-play   "></i>

                    <div>
                        <p class="atm-heading h6">Transport and logistics</p>
                        <div class="atm-paragraph">
                            <p>Public transport and airports</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-ferris-wheel   "></i>

                    <div>
                        <p class="atm-heading h6">Offices</p>
                        <div class="atm-paragraph">
                            <p>The latest industry news, updates and info.</p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <i class="atm-icon  fal fa-book   "></i>

                    <div>
                        <p class="atm-heading h6">Government</p>
                        <div class="atm-paragraph">
                            <p>The latest industry news, updates and info.</p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
        <div class="marketing-area">
            <div>
                <picture class="atm-image ">
                    <source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
                    <source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
                    <img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
                </picture>
                <h4 class="atm-heading ">Create more value for your customers with extra services</h4>

                <div class="atm-paragraph text-md">We’ve just released a 10 minute podcast about value creation for your customers.</div>

            </div>
            <a class="atm-button atm-button-primary  button-md icon-left   ">
                <div class="button-content-wrapper">
                    <span class="button-content">
                        <i class="atm-icon  fal fa-arrow-right   "></i>

                        <span>Listen podcast</span>
                    </span>
                </div>
                <span class="button-triangle"></span>
            </a>

        </div>
    </div>


<!-- Classic -->
{{#if subitems}}
    <div class="selector-sub mega-menu mega-menu--{{modifier}}">
        <ul>
            {{#each subitems}}
                <li>
                    <a href="{{href}}">
                        {{render '@icon' itemIcon}}
                        <div>
                            <p class="atm-heading h6">{{title}}</p>
                            <div class="atm-paragraph"><p>{{text}}</p></div>
                        </div>
                    </a>
                </li>
            {{/each}}
        </ul>
        {{#if contact}}
        <footer>
            <p>{{contact.text}} <a href="{{contact.href}}">{{contact.linkText}}</a></p>
        </footer>
        {{/if}}
    </div>
{{/if}}

<!-- Grid -->
{{#if subitems}}
    <div class="selector-sub mega-menu mega-menu--{{modifier}}">
        <ul>
            {{#each subitems}}
                <li>
                    <a href="{{href}}">
                        {{render '@icon' itemIcon}}
                        <div>
                            <p class="atm-heading h6">{{title}}</p>
                            <div class="atm-paragraph"><p>{{text}}</p></div>
                        </div>
                    </a>
                </li>
            {{/each}}
        </ul>
        {{#if contact}}
        <footer>
            <p>{{contact.text}} <a href="{{contact.href}}">{{contact.linkText}}</a></p>
        </footer>
        {{/if}}
    </div>
{{/if}}

<!-- Marketing -->
{{#if subitems}}
    <div class="selector-sub mega-menu mega-menu--{{modifier}}">
        <ul>
            {{#each subitems}}
                <li>
                    <a href="{{href}}">
                        {{render '@icon' itemIcon}}
                        <div>
                            <p class="atm-heading h6">{{title}}</p>
                            <div class="atm-paragraph"><p>{{text}}</p></div>
                        </div>
                    </a>
                </li>
            {{/each}}
        </ul>
        <div class="marketing-area">
            <div>
                {{render '@image'}}
                {{render '@heading--h4' heading merge=true}}
                {{render '@paragraph' paragraph merge=true}}
            </div>
            {{render '@button-primary--icon-left-md' button merge=true}}
        </div>
    </div>
{{/if}}
 
/* Classic */
{
  "contact": {
    "text": "Do you need advice right now? Call",
    "linkText": "+31 (0)88 099 08 90",
    "href": "#"
  },
  "subitems": [
    {
      "title": "Recreation",
      "text": "Holiday parks, Theme parks and more.",
      "active": true,
      "href": "#",
      "itemIcon": {
        "icon": "fa-ferris-wheel",
        "style": "fal"
      }
    },
    {
      "title": "Education",
      "text": "From primary schools till universities.",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-book",
        "style": "fal"
      }
    },
    {
      "title": "Industry",
      "text": "Farmaceutische , High Care and Voedingsmiddelenindustrie",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-bolt-lightning",
        "style": "fal"
      }
    },
    {
      "title": "Transport and logistics",
      "text": "Public transport and airports",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-circle-play",
        "style": "fal"
      }
    },
    {
      "title": "Offices",
      "text": "The latest industry news, updates and info.",
      "active": true,
      "href": "#",
      "itemIcon": {
        "icon": "fa-ferris-wheel",
        "style": "fal"
      }
    },
    {
      "title": "Government",
      "text": "The latest industry news, updates and info.",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-book",
        "style": "fal"
      }
    }
  ],
  "modifier": "classic",
  "hasIcon": false,
  "icon": {}
}


/* Grid */
{
  "contact": {
    "text": "Do you need advice right now? Call",
    "linkText": "+31 (0)88 099 08 90",
    "href": "#"
  },
  "subitems": [
    {
      "title": "Recreation",
      "text": "Holiday parks, Theme parks and more.",
      "active": true,
      "href": "#",
      "itemIcon": {
        "icon": "fa-ferris-wheel",
        "style": "fal"
      }
    },
    {
      "title": "Education",
      "text": "From primary schools till universities.",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-book",
        "style": "fal"
      }
    },
    {
      "title": "Industry",
      "text": "Farmaceutische , High Care and Voedingsmiddelenindustrie",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-bolt-lightning",
        "style": "fal"
      }
    },
    {
      "title": "Transport and logistics",
      "text": "Public transport and airports",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-circle-play",
        "style": "fal"
      }
    },
    {
      "title": "Offices",
      "text": "The latest industry news, updates and info.",
      "active": true,
      "href": "#",
      "itemIcon": {
        "icon": "fa-ferris-wheel",
        "style": "fal"
      }
    },
    {
      "title": "Government",
      "text": "The latest industry news, updates and info.",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-book",
        "style": "fal"
      }
    }
  ],
  "modifier": "grid",
  "hasIcon": false,
  "icon": {}
}


/* Marketing */
{
  "contact": {
    "text": "Do you need advice right now? Call",
    "linkText": "+31 (0)88 099 08 90",
    "href": "#"
  },
  "subitems": [
    {
      "title": "Recreation",
      "text": "Holiday parks, Theme parks and more.",
      "active": true,
      "href": "#",
      "itemIcon": {
        "icon": "fa-ferris-wheel",
        "style": "fal"
      }
    },
    {
      "title": "Education",
      "text": "From primary schools till universities.",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-book",
        "style": "fal"
      }
    },
    {
      "title": "Industry",
      "text": "Farmaceutische , High Care and Voedingsmiddelenindustrie",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-bolt-lightning",
        "style": "fal"
      }
    },
    {
      "title": "Transport and logistics",
      "text": "Public transport and airports",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-circle-play",
        "style": "fal"
      }
    },
    {
      "title": "Offices",
      "text": "The latest industry news, updates and info.",
      "active": true,
      "href": "#",
      "itemIcon": {
        "icon": "fa-ferris-wheel",
        "style": "fal"
      }
    },
    {
      "title": "Government",
      "text": "The latest industry news, updates and info.",
      "active": false,
      "href": "#",
      "itemIcon": {
        "icon": "fa-book",
        "style": "fal"
      }
    }
  ],
  "modifier": "marketing",
  "hasIcon": false,
  "icon": {},
  "heading": {
    "text": "Create more value for your customers with extra services"
  },
  "paragraph": {
    "text": "We’ve just released a 10 minute podcast about value creation for your customers."
  },
  "button": {
    "text": "Listen podcast"
  }
}
  • Content: 
    .mega-menu {
    @apply overflow-hidden min-w-[48rem] w-max border border-primary border-opacity-10;

    &.mega-menu--grid,
    &.mega-menu--marketing {
        > ul {
            > li a .atm-paragraph p {
                @apply max-w-none;
            }
        }
    }

    &.mega-menu--grid {
        > ul {
            @apply grid grid-cols-2 !p-8;
        }
    }

    &.mega-menu--marketing {
        @apply grid grid-cols-2 p-2;

        > ul {
            @apply max-h-[480px] overflow-y-scroll;
        }

        .marketing-area {
            @apply bg-primary bg-opacity-10 text-primary p-4 justify-between flex flex-col rounded-2xl max-w-sm;

            .atm-image img {
                @apply aspect-video object-cover rounded-lg mb-4 w-full;
            }

            .atm-heading {
                @apply mb-2;
            }

            .atm-paragraph {
                @apply mb-8 text-gray-500 text-left;
            }
        }
    }

    > ul {
        @apply !p-6 flex flex-col gap-6;

        > li a {
            @apply flex gap-6;

            .atm-icon {
                @apply text-h4 w-7 flex-shrink-0;
            }

            .atm-heading {
                @apply m-0 mb-2;
            }

            .atm-paragraph p {
                @apply text-sm  max-w-[26ch] transition-colors m-0;
            }

            &:hover * {
                @apply text-secondary-col-1;
            }
        }
    }

    footer {
        @apply font-display bg-primary bg-opacity-10 text-primary px-10 py-3 text-sm text-center;
    }
}
  • URL: /components/raw/mega-menu/mega-menu.css
  • Filesystem Path: src\components\03-molecules\mega-menu\mega-menu.css
  • Size: 1.6 KB

No notes defined.