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.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
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
,
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
,
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.
<.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>
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-silver"></.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>