Dropdown

New version v0.0.1 🚀

Dynamic dropdown menus with flexible styles and triggers in Phoenix LiveView to enhance user navigation and interaction.

Installation:

mix mishka.ui.gen.component dropdown

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

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.

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.

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.

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

<.dropdown relative="relative">
  <.dropdown_trigger>
    <.button color="primary" icon="hero-chevron-down" size="small" right_icon>
      Mishka dropdown
    </.button>
  </.dropdown_trigger>

  <.dropdown_content space="small" rounded="large" width="full" padding="extra_small">
    <.list size="small">
      <:item padding="extra_small" icon="hero-envelope">Dashboard</:item>
      <:item padding="extra_small" icon="hero-camera">Settings</:item>
      <:item padding="extra_small" icon="hero-camera">Earning</:item>
      <:item padding="extra_small" icon="hero-calendar">Sign out</:item>
    </.list>
  </.dropdown_content>
</.dropdown>

The dropdown component supports four distinct variants: default, outline, bordered, gradient, and shadow. Each variant can be styled with a variety of colors, including natural, primary, secondary, success, warning, danger, info, silver, misc, and dawn. These combinations allow for extensive customization to suit the design needs of your application.

<.dropdown relative="relative">
  <.dropdown_content variant="default" color="natural"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="default" color="white"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="default" color="dark"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="default" color="primary"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="shadow" color="secondary"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="shadow" color="dark"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="bordered" color="success"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="bordered" color="warning"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="outline" color="danger"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="outline" color="info"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="default" color="silver"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="shadow" color="misc"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content variant="bordered" color="dawn"></.dropdown_content>
</.dropdown>

The dropdown component provides flexible positioning options through the position attribute. By default, the dropdown appears at the bottom, but it can be adjusted to other positions such as left, right, top, top-left, top-right, bottom-right, and bottom-left provide even more precise alignment, enhancing the layout flexibility in your application.

<.dropdown position="left"></.dropdown>

<.dropdown position="right"></.dropdown>

<.dropdown position="top"></.dropdown>

<.dropdown position="top-left"></.dropdown>

<.dropdown position="top-right"></.dropdown>

<.dropdown position="bottom-left"></.dropdown>

<.dropdown position="bottom-right"></.dropdown>

The relative attribute in the dropdown component allows you to customize the relative positioning of the dropdown in relation to its trigger or parent element. By default, the dropdown takes no specific relative position, but using the relative attribute, you can set custom positioning for cases where the dropdown needs to adjust its placement dynamically within a specific context. This is particularly useful when the dropdown's position is dependent on its surrounding layout, such as within a scrolling container or when aligning it relative to other elements on the page. The flexibility of the relative attribute ensures that the dropdown can be tailored to fit seamlessly into various UI designs.

<.dropdown relative="relative">
  <.dropdown_trigger></.dropdown_trigger>

  <.dropdown_content></.dropdown_content>
</.dropdown>

The clickable attribute, when set to true, allows the dropdown to be activated by a click. For this to work, the dropdown_trigger must have a unique trigger_id, and the corresponding dropdown_content should use the same ID. This links the trigger to the content, enabling the dropdown to function correctly on click.

<.dropdown relative="relative" clickable>
  <.dropdown_trigger trigger_id="unique_id"></.dropdown_trigger>

  <.dropdown_content id="unique_id"></.dropdown_content>
</.dropdown>

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.

<!--This is ecxactly how to use this prop-->
<div class="relative">
  <.dropdown relative="md:relative">
    <.dropdown_trigger>
      <.button class="w-full">Dropdown</.button>
    </.dropdown_trigger>

    <.dropdown_content
      space="small"
      rounded="large"
      width="large"
      padding="extra_small"
    >
      <ul class="space-y-5">
        <li>
          <.dropdown position="right" nomobile>
            <.dropdown_trigger>
              <button>Nested Dropdown</button>
            </.dropdown_trigger>

            <.dropdown_content
              space="small"
              rounded="large"
              width="large"
              padding="extra_small"
            >
              <ul class="space-y-5">
                <li>Security</li>
                <li>Memory</li>
                <li>Design</li>
              </ul>
            </.dropdown_content>
          </.dropdown>
        </li>
        <li>Tabs</li>
        <li>Links</li>
      </ul>
    </.dropdown_content>
  </.dropdown>
</div>

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.

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

The rounded prop offers values like extra_small, small, medium, large, and extra_large.

<.dropdown relative="relative">
  <.dropdown_content rounded="extra_small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content rounded="small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content rounded="medium"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content rounded="large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content rounded="extra_large"></.dropdown_content>
</.dropdown>

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 dropdown contents.

<.dropdown relative="relative">
  <.dropdown_content space="extra_small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content space="small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content space="medium"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content space="large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content space="extra_large"></.dropdown_content>
</.dropdown>

The border prop offers values like extra_small, small, medium, large, and extra_large. These values control the border size of the dropdown contetn, allowing you to adjust the thickness to suit your design.

<.dropdown relative="relative">
  <.dropdown_content border="extra_small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content border="small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content border="medium"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content border="large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content border="extra_large"></.dropdown_content>
</.dropdown>

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 dropdown contents.

<.dropdown relative="relative">
  <.dropdown_content padding="extra_small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content padding="small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content padding="medium"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content padding="large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content padding="extra_large"></.dropdown_content>
</.dropdown>

The width attribute controls the width of the dropdown content. By setting the width value, you can easily limit how wide the dropdown can extend, maintaining a structured appearance across different screen sizes.

<.dropdown relative="relative">
  <.dropdown_content width="extra_small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="medium"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="extra_large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="double_large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="triple_large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="quadruple_large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content width="full"></.dropdown_content>
</.dropdown>

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

<.dropdown relative="relative">
  <.dropdown_content size="extra_small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content size="small"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content size="medium"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content size="large"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content size="extra_large"></.dropdown_content>
</.dropdown>

The font_weight prop controls the font weight of the text. By setting this prop, you can determine how bold or silver 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 dropdown. This provides flexibility in ensuring the title stands out appropriately within the overall dropdown layout.

<.dropdown relative="relative">
  <.dropdown_content font_Weight="font-bold"></.dropdown_content>
</.dropdown>

<.dropdown relative="relative">
  <.dropdown_content font_Weight="font-thin"></.dropdown_content>
</.dropdown>

Dropdown component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
class	string	No	Custom CSS class for additional styling.
width	string	No	Determines the element width. Default: w-fit.
position	string	No	Determines the element position. Default: bottom.
relative	string	No	Custom relative position for the dropdown.
variant	string	No	Determines the style of the dropdown. Supported values: default, outline, shadow, bordered, gradient.
color	string	No	Determines the color theme of the dropdown. Supported values: natural, primary, secondary, success, warning, danger, info, silver, misc, dawn. Default is natural.The default and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
clickable	boolean	No	Determines if the dropdown can be activated on click. Default: false.
nomobile	boolean	No	Controls whether the dropdown is disabled on mobile devices. Default: false.

Dropdown Trigger component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
trigger_id	string	No	Identifies the ID of the element to be triggered. Notice: When the dropdown is clickable, this prop is required.
class	string	No	Custom CSS class for additional styling.

Dropdown Content component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
variant	string	No	Determines the style. Default is default variant.
color	string	No	Determines color theme. Default is natural.
rounded	string	No	Determines the border radius.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items.
space	string	No	Space between items.
width	string	No	Determines the element width. Default is extra_large.
font_weight	string	No	Determines custom class for the font weight. Default is font-normal.
padding	string	No	Determines padding for items. Default is none.
border	string	No	Determines border style. Default is extra_small.
class	string	No	Custom CSS class for additional styling.

Dropdown CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - bordered - shadow - gradient	Yes
`--color`	string	natural - white - dark - primary - secondary - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - none	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--type`	string	dropdown - dropdown_trigger - dropdown_content	Yes
`--only`	string	dropdown - dropdown_trigger - dropdown_content	Yes
`--module`	string	Something	NO