Mishka
Chelekom

Dropdown

v0.0.10

v0.0.10StableComponentStatelessJS-moduleJSApache-2.0
Installation mix mishka.ui.gen.component dropdown
Source View Source

Overview of the Phoenix LiveView dropdown Component

The Mishka Chelekom dropdown component is a highly customizable Phoenix LiveView tool for creating interactive and responsive dropdown menus. Ideal for navigation, action selection, and content display, it supports various styles, positions, and triggers with flexible options for colors, sizes, and border styles to seamlessly integrate into your app's design.

Overview of the Phoenix LiveView dropdown Component

This Phoenix LiveView component also includes customizable triggers for hover or click activation, as well as multiple content options, making it a versatile solution for enhancing user interaction and navigation within your application.

How to use dropdown

The dropdown is a wrapper that includes a trigger slot, which can be any button or the Mishka button component, and a content slot. You can add any list for navigation or other purposes in the content.

Nomobile prop

The nomobile attribute is useful for fixing the position of nested dropdowns on mobile devices. When set to true, it adjusts the dropdown's positioning to ensure proper display in responsive layouts, particularly in complex navigation menus like a navbar. This prevents nested dropdowns from overlapping or displaying incorrectly on smaller screens, improving the overall usability and appearance of dropdowns in mobile views. this feature is only for mobile so you can see the influence of this prop in smaller screen sizes.

Nomobile prop

heex
<!--This is exactly how to use this prop-->
<div class="relative">
  <.dropdown id="dropdown-nomobile" relative="md:relative" space="small" rounded="large" width="large" padding="extra_small">
    <:trigger>
      <.button class="w-full">Dropdown</.button>
    </:trigger>

    <:content>
      <ul class="space-y-5">
        <li>
          <.dropdown id="dropdown-nested" position="right" nomobile rounded="large" padding="extra_small">
            <:trigger>
              <button>Nested Dropdown</button>
            </:trigger>

            <:content>
              <ul class="space-y-5">
                <li>Security</li>
                <li>Memory</li>
                <li>Design</li>
              </ul>
            </:content>
          </.dropdown>
        </li>
        <li>Tabs</li>
        <li>Links</li>
      </ul>
    </:content>
  </.dropdown>
</div>

Width prop

The width attribute controls the dropdown's width, adjusting to fit the content by default. You can customize it to suit your layout needs, providing flexibility in how the dropdown fits within your design.

Width prop

heex
<.dropdown id="dropdown-width-w-full" relative="relative" width="w-full"></.dropdown>
<.dropdown id="dropdown-width-w-1-2" relative="relative" width="w-1/2"></.dropdown>
<.dropdown id="dropdown-width-w-fit" relative="relative" width="w-fit"></.dropdown>