Mega Menu

The Mishka Chelekom mega menu component is a highly customizable Phoenix LiveView tool designed for creating dynamic, multi-level navigation systems.

This Phoenix LiveView component offers a range of customization features, such as hover or click-based activation, nested menu levels, and support for various menu states (e.g., expanded or collapsed). Its versatility ensures a smooth integration into any navigation-heavy website.

The Mishka Chelekom mega menu can be seamlessly integrated into a navbar component or any custom component by using its flexible :trigger slot. This allows the mega menu to be triggered on hover or click, depending on how you configure it. To ensure proper positioning of the menu relative to the trigger element, the wrapper of the mega menu should include the relative class. This setup ensures that the mega menu will appear dynamically when interacting with the trigger, providing a smooth and responsive multi-level navigation experience tailored to your application's needs.

<div class="relative w-full">
  <.mega_menu
    space="small"
    rounded="large"
    padding="extra_small"
    top_gap="large"
  >
      <:trigger>
        <.button>MegaMenu</.button>
      </:trigger>

      <div class="grid md:grid-cols-2 lg:grid-cols-3">
      <ul class="space-y-4 sm:mb-4 md:mb-0" aria-labelledby="mega-menu-full-cta-button">
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          Product Categories
        </li>
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          Customer Support
        </li>
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          About Us
        </li>
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          Contact
        </li>
      </ul>
      <ul class="hidden mb-4 space-y-4 md:mb-0 sm:block">
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          Blog
        </li>
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          Privacy Policy
        </li>
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          Terms of Service
        </li>
        <li class="hover:underline hover:text-blue-600 cursor-pointer">
          Documentation
        </li>
      </ul>
    </div>
  </.mega_menu>
</div>

The Mishka Chelekom mega menu provides a high level of customization with a variety of color themes and design variants. You can select from several predefined colors such as base, white, primary, secondary, dark, success, warning, danger, info, silver, misc, and dawn, allowing you to match the menu with your application’s overall theme. Additionally, the menu offers flexible layout styles with variants like default, outline, gradient, base, bordered, and shadow, giving you control over how the menu looks, whether you want a bordered, bordered, or shadowed design, ensuring both aesthetic and functional requirements are met.

<!--Default is base it's not necessary to specify the name of color and variant-->
<.mega_menu></.mega_menu>
<.mega_menu color="white" variant="default"></.mega_menu>
<.mega_menu color="primary" variant="outline"></.mega_menu>
<.mega_menu color="secondary" variant="bordered"></.mega_menu>
<.mega_menu color="natural" variant="shadow"></.mega_menu>
<.mega_menu color="success" variant="default"></.mega_menu>
<.mega_menu color="warning" variant="outline"></.mega_menu>
<.mega_menu color="danger" variant="bordered"></.mega_menu>
<.mega_menu color="info" variant="shadow"></.mega_menu>
<.mega_menu color="silver" variant="default"></.mega_menu>
<.mega_menu color="misc" variant="outline"></.mega_menu>
<.mega_menu color="dark" variant="bordered"></.mega_menu>
<.mega_menu color="dawn" variant="gradient"></.mega_menu>

The clickable mode of the mega_menu component allows you to trigger the display of Mega menu by clicking on a specific element. To achieve this, you need to assign a unique ID to the mega_menu. This connection ensures that when the trigger element is clicked, the corresponding Mega menu is displayed. By using the clickable prop, you create an interactive and intuitive experience for users.

<.mega_menu id="unique_id" clickable></.mega_menu>

The size prop offers values such as extra_small, small, medium, large, and extra_large. These values control text size within the mega menu contents.

<.mega_menu size="extra_small"></.mega_menu>
<.mega_menu size="small"></.mega_menu>
<.mega_menu size="medium"></.mega_menu>
<.mega_menu size="large"></.mega_menu>
<.mega_menu size="extra_large"></.mega_menu>

The space prop offers values such as extra_small, small, medium, large, and extra_large. These values control the vertical spacing between elements within the mega menu-contents.

<.mega_menu space="small"></.mega_menu>
<.mega_menu space="medium"></.mega_menu>
<.mega_menu space="large"></.mega_menu>
<.mega_menu space="extra_small"></.mega_menu>
<.mega_menu space="medium"></.mega_menu>

The padding prop offers values such as extra_small, small, medium, large, and extra_large. These values control the padding around the content inside the mega menu contents.

<.mega_menu padding="small"></.mega_menu>
<.mega_menu padding="medium"></.mega_menu>
<.mega_menu padding="large"></.mega_menu>
<.mega_menu padding="extra_small"></.mega_menu>
<.mega_menu padding="medium"></.mega_menu>

The rounded prop allows developers to customize the border-radius of components, controlling how rounded the corners appear. The rounded prop accepts values like extra_small, small, medium, large, and extra_large. This flexibility allows developers to adjust the component's visual style, giving it a sleek, rounded appearance or sharp edges to fit various design needs.

<.mega_menu rounded="small"></.mega_menu>
<.mega_menu rounded="medium"></.mega_menu>
<.mega_menu rounded="large"></.mega_menu>
<.mega_menu rounded="extra_small"></.mega_menu>
<.mega_menu rounded="medium"></.mega_menu>

The border prop allows developers to customize the border of components. The border prop accepts values like extra_small, small, medium, large, and extra_large.

<.mega_menu border="small"></.mega_menu>
<.mega_menu border="medium"></.mega_menu>
<.mega_menu border="large"></.mega_menu>
<.mega_menu border="extra_small"></.mega_menu>
<.mega_menu border="medium"></.mega_menu>

The top_gap attribute can take the following values to set the gap between the trigger and content of the mega menu: extra_small, small, medium, large, and extra_large.

<.mega_menu top_gap="small"></.mega_menu>
<.mega_menu top_gap="medium"></.mega_menu>
<.mega_menu top_gap="large"></.mega_menu>
<.mega_menu top_gap="extra_small"></.mega_menu>
<.mega_menu top_gap="medium"></.mega_menu>

The font_weight prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is font-normal. You can customize this value to apply different font weights, such as making the text lighter or bolder, depending on the visual style and emphasis you want to create for the mega menu's title. This provides flexibility in ensuring the title stands out appropriately within the overall mega menu layout.

<.mega_menu font_weight="font-bold"></.mega_menu>
<.mega_menu font_weight="font-thin"></.mega_menu>
<.mega_menu font_weight="font-semibold"></.mega_menu>

The trigger slot in the mega menu component serves as a versatile entry point for users to open the menu. You can place any HTML element within this slot, such as buttons, links, or icons, making it adaptable to your design needs. This flexibility allows for a seamless integration of the mega menu into various layouts, whether you prefer a simple button or a more complex interactive element. By utilizing the trigger slot, you can enhance user engagement, as it invites interaction through intuitive controls that align with your application's aesthetic.

<.mega_menu>
   <:trigger>
    <button>Trigger button</button>
  </:trigger>
</.mega_menu>

<.mega_menu>
   <:trigger>
    <.button>Trigger button</.button>
  </:trigger>
</.mega_menu>