Overview of the Phoenix and LiveView Menu Component

The Mishka Chelekom Menu component is a Phoenix LiveView component designed to help developers create dynamic, hierarchical menu structures. This component acts as a wrapper for menu items and supports both simple navigation menus and more complex, multi-level systems with nested sub-menus.

This Phoenix LiveView component allows developers to customize the appearance and layout of their menus, including padding, spacing, and nested accordions. With flexible configuration options, developers can easily build responsive and visually appealing navigation systems for their Phoenix applications.

Padding prop of Phoenix LiveView menu component

The padding prop in the menu component allows developers to adjust the spacing around items within the menu. Available options include extra_small , small , medium , large , and extra_large . There's also a none option for removing padding entirely. These options provide flexibility in menu design and layout.

<.menu padding="extra_small"></.menu>
<.menu padding="small"></.menu>
<.menu padding="medium"></.menu>
<.menu padding="large"></.menu>
<.menu padding="extra_large"></.menu>

space prop of Phoenix LiveView menu component

The space prop in the menu component controls the spacing between menu items. Available options include extra_small , small , medium , large , and extra_large . This prop allows developers to define how much vertical space is applied between the items, enhancing the layout flexibility within the menu.

<.menu space="extra_small"></.menu>
<.menu space="small"></.menu>
<.menu space="medium"></.menu>
<.menu space="large"></.menu>
<.menu space="extra_large"></.menu>

Menu items prop of Phoenix LiveView menu component

The menu_items prop in the menu component allows developers to pass a list of maps that define the structure and content of the menu. Each map represents an individual menu item and includes attributes such as id , title , navigate for navigation, size , color , icon , and more, making it highly customizable. The prop also supports nested sub-menus through the sub_items key, which allows for hierarchical menu structures, ideal for multi-level navigation. By using this prop, developers can create flexible and dynamic menu systems without needing to manually write HTML for each item.

<!--Choose any color for buttons and accordion as -->
list_menues = [
  %{
    id: "Dashboard",
    navigate: "/path",
    title: "Dashboard",
    size: "extra_small",
    color: "misc",
    variant: "transparent",
    rounded: "large",
    class: "class name",
    display: "flex",
    icon_class: "",
    icon: "hero-home",
    active: true
  },
  %{
    id: "Settings",
    title: "Settings",
    padding: "pl-5 space-y-3 mt-3",
    size: "extra_small",
    rounded: "large",
    color: "misc",
    variant: "menu",
    icon: "",
    icon_class: "",
    sub_items: [
      %{
        navigate: "/path",
        title: "Account Settings",
        size: "extra_small",
        color: "misc",
        variant: "transparent",
        rounded: "large",
        class: "class name",
        display: "flex",
        icon_class: "",
        icon: ""
      }
    ]
  }
]

<.menu menu_items={@list_menues} />

How to create collapsible menu

If you're looking to create a collapsible menu, you can utilize the Mishka Chelekom accordion component . This versatile tool allows you to organize menu items into expandable sections, providing a cleaner and more structured navigation experience. By integrating the accordion into your menu, you can present content in a space-efficient way, allowing users to expand and collapse sections as needed. This is especially useful for handling multiple levels of nested content or when displaying complex information hierarchies.

<!--Choose any color for buttons and accordion as -->
<.menu space="small">
  <li>
    <.button_link variant="transparent" navigate="/path">Dashboard</.button_link>
  </li>

  <li>
    <.button_link variant="transparent" navigate="/path">Footer</.button_link>
  </li>

  <li>
    <.accordion id="unique_id" variant="transparent" padding="small">
      <:item title="Settings">
      <.button_link variant="transparent" navigate="/path">Account</.button_link>
      </:item>
    </.accordion>
  </li>

  <li>
    <.button_link variant="transparent" navigate="/path">Modal</.button_link>
  </li>

  <li>
    <.button_link variant="transparent" navigate="/path">List</.button_link>
  </li>
</.menu>