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

Mishka chelekom dropdown supports trigger and content slots for adding content within a dropdown. It also supports dropdown_trigger and dropdown_content, and you can see the props in the props tab.

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.

<!--Base is default color and variant-->
<.dropdown></.dropdown>

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

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

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

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

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

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

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

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

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

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

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

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

<.dropdown variant="bordered" color="dawn"></.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">
  <:trigger></:trigger>

  <:content></:content>
</.dropdown>

The clickable attribute, when set to true, allows the dropdown to be activated by a click.

<.dropdown relative="relative" clickable id="unique_id">
  <:trigger></:trigger>

  <:content></: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" content_width="large" padding="extra_small">
    <:trigger>
      <.button class="w-full">Dropdown</.button>
    </:trigger>

    <:content>
      <ul class="space-y-5">
        <li>
          <.dropdown position="right" nomobile>
            <:trigger>
              <button>Nested Dropdown</button>
            </:trigger>

            <: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>
            </:content>
          </.dropdown>
        </li>
        <li>Tabs</li>
        <li>Links</li>
      </ul>
    </: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" rounded="extra_small"></.dropdown>

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

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

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

<.dropdown relative="relative" rounded="extra_large"></.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" space="extra_small"></.dropdown>

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

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

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

<.dropdown relative="relative" space="extra_large"></.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" border="extra_small"></.dropdown>

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

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

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

<.dropdown relative="relative" border="extra_large"></.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" padding="extra_small"></.dropdown>

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

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

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

<.dropdown relative="relative" padding="extra_small"></.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" width="extra_small"></.dropdown>

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

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

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

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

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

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

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

<.dropdown relative="relative" width="full"></.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" size="extra_small"></.dropdown>

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

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

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

<.dropdown relative="relative" size="extra_large"></.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" font_Weight="font-bold"></.dropdown>

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

Dropdown component props

Name	Type	Required	Description
id	string	Required	A unique identifier is used to manage state and interaction.
content_width	string	no	Determines the element width
space	string	no	Space between items
trigger	slot	Required	Slot to add components as trigger. It has a style prop to add custom styles to trigger.
content	slot	Required	Slot for showing content add inside dropdown. It has a style prop to add custom styles to content.
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: base, default, outline, shadow, bordered, gradient.
color	string	No	Determines the color theme of the dropdown. Supported values: base, 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 - base	Yes
`--color`	string	base - 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

Dropdown

Application

User Actions

Dropdown component props

Dropdown Trigger component props

Dropdown Content component props

Dropdown CLI Arguments