Overview of the Phoenix LiveView Mega Menu Component

The Mishka Chelekom mega menu component is a highly customizable Phoenix LiveView tool designed for creating dynamic, multi-level navigation systems. Perfect for websites with complex information architecture, this component allows for flexible menu layouts with options for colors, sizes, and styles to match your app's design.

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.

How use mega menu component

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>

Mega menu variants and colors in Phoenix liveView

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 white , primary , secondary , dark , success , warning , danger , info , light , 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 , unbordered , and shadow , giving you control over how the menu looks—whether you want a bordered, unbordered, or shadowed design, ensuring both aesthetic and functional requirements are met.

<.mega_menu color="white" variant="default"></.mega_menu>
<.mega_menu color="primary" variant="outline"></.mega_menu>
<.mega_menu color="secondary" variant="unbordered"></.mega_menu>
<.mega_menu color="dark" 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="unbordered"></.mega_menu>
<.mega_menu color="info" variant="shadow"></.mega_menu>
<.mega_menu color="light" variant="default"></.mega_menu>
<.mega_menu color="misc" variant="outline"></.mega_menu>
<.mega_menu color="dawn" variant="unbordered"></.mega_menu>

Clickable prop

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>

Mega menu size prop

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>

Mega menu space prop

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>

Mega menu padding prop

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>

Mega menu rounded prop

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>

Mega menu border prop

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>

Mega menu top gap prop

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>

Mega menu font weight prop

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-light"></.mega_menu>
<.mega_menu font_weight="font-semibold"></.mega_menu>

Trigger slot

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>