Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
<ul class="midwest-dropdown-menu w-64 relative">
  <a class="midwest-dropdown-item as-link" role="menuitem" href="#">
    Menu item
  </a>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<% tip = params[:tooltip].presence %>
<% confirm_text = params[:confirm].presence %>
<ul class="midwest-dropdown-menu w-64 relative">
  <%= midwest_dropdown_item(
    label: params[:label] || 'Menu item',
    path: '#',
    as: params[:as]&.to_sym || :link,
    disabled: params[:disabled] == 'true',
    tooltip: tip,
    confirm: confirm_text,
    confirm_args: confirm_text ? { path: '#', method: :delete } : {}
  ) %>
</ul>

Playground

This example uses dynamic preview parameters which can be edited live in the Lookbook UI

Param Description Input

The text content of the item

The type of item to render

Prevents interaction with the item

Optional tooltip shown on hover (button/link items only)

Confirmation message before acting (button/link items only)

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Dropdown Item/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."