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.
How to use dropdown
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>
Dropdown color variant props
The dropdown component supports four distinct variants:
default
,
outline
,
unbordered
, and
shadow
. Each variant can be styled with a variety of colors, including
white
,
primary
,
secondary
,
dark
,
success
,
warning
,
danger
,
info
,
light
,
misc
, and
dawn
. These combinations allow for extensive customization to suit the design needs of your application.
- Dashboard
- Settings
- Earning
- Sign out
- Dashboard
- Settings
- Earning
- Sign out
<.dropdown relative="relative"> <.dropdown_content variant="default" color="white"></.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="unbordered" color="success"></.dropdown_content> </.dropdown> <.dropdown relative="relative"> <.dropdown_content variant="unbordered" 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="light"></.dropdown_content> </.dropdown> <.dropdown relative="relative"> <.dropdown_content variant="shadow" color="misc"></.dropdown_content> </.dropdown> <.dropdown relative="relative"> <.dropdown_content variant="unbordered" color="dawn"></.dropdown_content> </.dropdown>
Dropdown position prop
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.
- Dashboard
- Settings
- Earning
- Sign out
- Dashboard
- Settings
- Earning
- Sign out
<.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>
Dropdown relative prop
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.
- Dashboard
- Settings
- Earning
- Sign out
<.dropdown relative="relative"> <.dropdown_trigger></.dropdown_trigger> <.dropdown_content></.dropdown_content> </.dropdown>
Dropdown clickable prop
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.
- Dashboard
- Settings
- Earning
- Sign out
<.dropdown relative="relative" clickable> <.dropdown_trigger trigger_id="unique_id"></.dropdown_trigger> <.dropdown_content id="unique_id"></.dropdown_content> </.dropdown>
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.
-
- Security
- Memory
- Design
- Tabs
- Links
<!--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>
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.
- Dashboard
- Settings
- Earning
- Sign out
<.dropdown relative="relative" width="w-full"></.dropdown> <.dropdown relative="relative" width="w-1/2"></.dropdown> <.dropdown relative="relative" width="w-fit"></.dropdown>
Dropdown content Rounded prop
The rounded prop offers values like
extra_small
,
small
,
medium
,
large
, and
extra_large
.
- Dashboard
- Settings
- Earning
- Sign out
<.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>
Dropdown content 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 dropdown contents.
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
<.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>
Dropdown content Border prop
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.
- Dashboard
- Settings
- Dashboard
- Settings
<.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>
Dropdown content 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 dropdown contents.
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
<.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>
Dropdown content Width prop
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.
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
<.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>
Dropdown content size prop
The size prop offers values such as
extra_small
,
small
,
medium
,
large
, and
extra_large
. These values control text size within the dropdown contents.
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
- Dashboard
- Settings
<.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>
Dropdown content 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 dropdown. This provides flexibility in ensuring the title stands out appropriately within the overall dropdown layout.
- Dashboard
- Settings
- Dashboard
- Settings
<.dropdown relative="relative"> <.dropdown_content font_Weight="font-bold"></.dropdown_content> </.dropdown> <.dropdown relative="relative"> <.dropdown_content font_Weight="font-thin"></.dropdown_content> </.dropdown>