dropdown

Dropdown can open a menu or any other element when the button is clicked.

Base Dropdown

Exported source

dropdown = SingleValueFactory("dropdown", "Dropdown container component") # Dropdown container
dropdown_content = SingleValueFactory("dropdown-content", "Content part of dropdown") # Dropdown content

Dropdown Placement

Dropdown placement options:

Exported source

dropdown_placement = SimpleFactory(
    {
        # Horizontal alignment
        "start": "dropdown-start",
        "center": "dropdown-center",
        "end": "dropdown-end",
        # Vertical position
        "top": "dropdown-top",
        "bottom": "dropdown-bottom",
        "left": "dropdown-left",
        "right": "dropdown-right"
    },
    "Dropdown placement options for horizontal alignment and vertical position"
) # Dropdown placement options

Dropdown Modifiers

Exported source

dropdown_modifiers = SimpleFactory(
    {
        "hover": "dropdown-hover",
        "open": "dropdown-open"
    },
    "Dropdown behavior modifiers (hover trigger, force open)"
) # Dropdown modifiers

test_dropdown_basic_examples

 test_dropdown_basic_examples ()

Test basic dropdown utilities.

Exported source

def test_dropdown_basic_examples():
    """Test basic dropdown utilities."""
    assert str(dropdown) == "dropdown"
    assert str(dropdown_content) == "dropdown-content"
    
    # With modifiers
    assert str(dropdown.hover) == "hover:dropdown"
    assert str(dropdown_content.md) == "md:dropdown-content"

# Run the tests
test_dropdown_basic_examples()

source

test_dropdown_placement_examples

 test_dropdown_placement_examples ()

Test dropdown placement options.

Exported source

def test_dropdown_placement_examples():
    """Test dropdown placement options."""
    # Horizontal alignment
    assert str(dropdown_placement.start) == "dropdown-start"
    assert str(dropdown_placement.center) == "dropdown-center"
    assert str(dropdown_placement.end) == "dropdown-end"
    
    # Vertical position
    assert str(dropdown_placement.top) == "dropdown-top"
    assert str(dropdown_placement.bottom) == "dropdown-bottom"
    assert str(dropdown_placement.left) == "dropdown-left"
    assert str(dropdown_placement.right) == "dropdown-right"

# Run the tests
test_dropdown_placement_examples()

source

test_dropdown_modifiers_examples

 test_dropdown_modifiers_examples ()

Test dropdown modifier utilities.

Exported source

def test_dropdown_modifiers_examples():
    """Test dropdown modifier utilities."""
    assert str(dropdown_modifiers.hover) == "dropdown-hover"
    assert str(dropdown_modifiers.open) == "dropdown-open"

# Run the tests
test_dropdown_modifiers_examples()

source

test_dropdown_basic_fasthtml_examples

 test_dropdown_basic_fasthtml_examples ()

Test basic dropdown implementations including details/summary and popover API.

Exported source

def test_dropdown_basic_fasthtml_examples():
    """Test basic dropdown implementations including details/summary and popover API."""
    from fasthtml.common import Details, Summary, Ul, Li, A, Div, Button
    from cjm_fasthtml_tailwind.core.base import combine_classes
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    
    # Dropdown using details and summary
    dropdown_details = Details(
        Summary("open or close", cls=combine_classes(btn, m._1)),
        Ul(
            Li(A("Item 1")),
            Li(A("Item 2")),
            cls=combine_classes(
                menu,
                dropdown_content,
                bg_dui.base_100,
                border_radius.box,
                z._1,
                w._52,
                p._2,
                shadow.sm
            )
        ),
        cls=str(dropdown)
    )
    assert dropdown_details.tag == "details"
    assert "dropdown" in dropdown_details.attrs['class']
    assert "btn" in dropdown_details.children[0].attrs['class']
    assert "dropdown-content" in dropdown_details.children[1].attrs['class']
    
    # Dropdown using popover API and anchor positioning
    popover_button = Button(
        "Button",
        cls=str(btn),
        popovertarget="popover-1",
        style="anchor-name:--anchor-1"
    )
    popover_menu = Ul(
        Li(A("Item 1")),
        Li(A("Item 2")),
        cls=combine_classes(dropdown, menu, w._52, border_radius.box, bg_dui.base_100, shadow.sm),
        popover=True,
        id="popover-1",
        style="position-anchor:--anchor-1"
    )
    assert popover_button.attrs['popovertarget'] == "popover-1"
    assert popover_menu.attrs['popover'] == True
    assert popover_menu.attrs['id'] == "popover-1"
    
    # Basic dropdown menu
    basic_dropdown = Div(
        Div("Click", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        Ul(
            Li(A("Item 1")),
            Li(A("Item 2")),
            tabindex="0",
            cls=combine_classes(
                dropdown_content,
                menu,
                bg_dui.base_100,
                border_radius.box,
                z._1,
                w._52,
                p._2,
                shadow.sm
            )
        ),
        cls=str(dropdown)
    )
    assert "dropdown" in basic_dropdown.attrs['class']
    assert basic_dropdown.children[0].attrs['role'] == "button"
    assert basic_dropdown.children[0].attrs['tabindex'] == "0"
    
    # Return all elements in a Div
    return Div(
        dropdown_details,
        popover_button,
        popover_menu,
        basic_dropdown
    )

# Run the tests
test_dropdown_basic_fasthtml_examples()

<div>
<details class="dropdown"><summary class="btn m-1">open or close</summary>    <ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
</details><button popovertarget="popover-1" class="btn" style="anchor-name:--anchor-1">Button</button>  <ul popover id="popover-1" class="dropdown menu w-52 rounded-box bg-base-100 shadow-sm" style="position-anchor:--anchor-1">
    <li>
<a href="#">Item 1</a>    </li>
    <li>
<a href="#">Item 2</a>    </li>
  </ul>
  <div class="dropdown">
    <div tabindex="0" role="button" class="btn m-1">Click</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
</div>

test_func = test_dropdown_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_dropdown_placement_fasthtml_examples

 test_dropdown_placement_fasthtml_examples ()

Test dropdown placement variations for all positions.

Exported source

def test_dropdown_placement_fasthtml_examples():
    """Test dropdown placement variations for all positions."""
    from fasthtml.common import Div, Ul, Li, A
    from cjm_fasthtml_tailwind.core.base import combine_classes
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    
    # Helper function to create dropdown content
    def create_dropdown_content():
        return Ul(
            Li(A("Item 1")),
            Li(A("Item 2")),
            tabindex="0",
            cls=combine_classes(
                dropdown_content,
                menu,
                bg_dui.base_100,
                border_radius.box,
                z._1,
                w._52,
                p._2,
                shadow.sm
            )
        )
    
    # Dropdown start (aligns to start of button horizontally)
    dropdown_start = Div(
        Div("Click ⬇️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.start)
    )
    assert "dropdown-start" in dropdown_start.attrs['class']
    
    # Dropdown end (aligns to end of button horizontally)
    dropdown_end = Div(
        Div("Click ⬇️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.end)
    )
    assert "dropdown-end" in dropdown_end.attrs['class']
    
    # Dropdown center (aligns to center of button horizontally)
    dropdown_center = Div(
        Div("Click ⬇️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.center)
    )
    assert "dropdown-center" in dropdown_center.attrs['class']
    
    # Dropdown top
    dropdown_top = Div(
        Div("Click ⬆️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.top)
    )
    assert "dropdown-top" in dropdown_top.attrs['class']
    
    # Dropdown top center
    dropdown_top_center = Div(
        Div("Click ⬆️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.top, dropdown_placement.center)
    )
    assert "dropdown-top" in dropdown_top_center.attrs['class']
    assert "dropdown-center" in dropdown_top_center.attrs['class']
    
    # Dropdown top end
    dropdown_top_end = Div(
        Div("Click ⬆️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.top, dropdown_placement.end)
    )
    assert "dropdown-top" in dropdown_top_end.attrs['class']
    assert "dropdown-end" in dropdown_top_end.attrs['class']
    
    # Dropdown bottom (default)
    dropdown_bottom = Div(
        Div("Click ⬇️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.bottom)
    )
    assert "dropdown-bottom" in dropdown_bottom.attrs['class']
    
    # Dropdown bottom center
    dropdown_bottom_center = Div(
        Div("Click ⬇️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.bottom, dropdown_placement.center)
    )
    assert "dropdown-bottom" in dropdown_bottom_center.attrs['class']
    assert "dropdown-center" in dropdown_bottom_center.attrs['class']
    
    # Dropdown bottom end
    dropdown_bottom_end = Div(
        Div("Click ⬇️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.bottom, dropdown_placement.end)
    )
    assert "dropdown-bottom" in dropdown_bottom_end.attrs['class']
    assert "dropdown-end" in dropdown_bottom_end.attrs['class']
    
    # Dropdown left
    dropdown_left = Div(
        Div("Click ⬅️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.left)
    )
    assert "dropdown-left" in dropdown_left.attrs['class']
    
    # Dropdown left center
    dropdown_left_center = Div(
        Div("Click ⬅️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.left, dropdown_placement.center)
    )
    assert "dropdown-left" in dropdown_left_center.attrs['class']
    assert "dropdown-center" in dropdown_left_center.attrs['class']
    
    # Dropdown left end
    dropdown_left_end = Div(
        Div("Click ⬅️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.left, dropdown_placement.end)
    )
    assert "dropdown-left" in dropdown_left_end.attrs['class']
    assert "dropdown-end" in dropdown_left_end.attrs['class']
    
    # Dropdown right
    dropdown_right = Div(
        Div("Click ➡️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.right)
    )
    assert "dropdown-right" in dropdown_right.attrs['class']
    
    # Dropdown right center
    dropdown_right_center = Div(
        Div("Click ➡️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.right, dropdown_placement.center)
    )
    assert "dropdown-right" in dropdown_right_center.attrs['class']
    assert "dropdown-center" in dropdown_right_center.attrs['class']
    
    # Dropdown right end
    dropdown_right_end = Div(
        Div("Click ➡️", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        create_dropdown_content(),
        cls=combine_classes(dropdown, dropdown_placement.right, dropdown_placement.end)
    )
    assert "dropdown-right" in dropdown_right_end.attrs['class']
    assert "dropdown-end" in dropdown_right_end.attrs['class']
    
    # Return all elements in a Div
    return Div(
        dropdown_start,
        dropdown_end,
        dropdown_center,
        dropdown_top,
        dropdown_top_center,
        dropdown_top_end,
        dropdown_bottom,
        dropdown_bottom_center,
        dropdown_bottom_end,
        dropdown_left,
        dropdown_left_center,
        dropdown_left_end,
        dropdown_right,
        dropdown_right_center,
        dropdown_right_end
    )

# Run the tests
test_dropdown_placement_fasthtml_examples()

<div>
  <div class="dropdown dropdown-start">
    <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-end">
    <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-center">
    <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-top">
    <div tabindex="0" role="button" class="btn m-1">Click ⬆️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-top dropdown-center">
    <div tabindex="0" role="button" class="btn m-1">Click ⬆️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-top dropdown-end">
    <div tabindex="0" role="button" class="btn m-1">Click ⬆️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-bottom">
    <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-bottom dropdown-center">
    <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-bottom dropdown-end">
    <div tabindex="0" role="button" class="btn m-1">Click ⬇️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-left">
    <div tabindex="0" role="button" class="btn m-1">Click ⬅️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-left dropdown-center">
    <div tabindex="0" role="button" class="btn m-1">Click ⬅️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-left dropdown-end">
    <div tabindex="0" role="button" class="btn m-1">Click ⬅️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-right">
    <div tabindex="0" role="button" class="btn m-1">Click ➡️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-right dropdown-center">
    <div tabindex="0" role="button" class="btn m-1">Click ➡️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-right dropdown-end">
    <div tabindex="0" role="button" class="btn m-1">Click ➡️</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
</div>

test_func = test_dropdown_placement_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_dropdown_hover_and_state_fasthtml_examples

 test_dropdown_hover_and_state_fasthtml_examples ()

Test dropdown hover behavior and force open state.

Exported source

def test_dropdown_hover_and_state_fasthtml_examples():
    """Test dropdown hover behavior and force open state."""
    from fasthtml.common import Div, Ul, Li, A
    from cjm_fasthtml_tailwind.utilities.spacing import m, p
    from cjm_fasthtml_tailwind.utilities.layout import z
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    
    # Dropdown on hover
    dropdown_hover = Div(
        Div("Hover", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        Ul(
            Li(A("Item 1")),
            Li(A("Item 2")),
            tabindex="0",
            cls=combine_classes(
                dropdown_content,
                menu,
                bg_dui.base_100,
                border_radius.box,
                z._1,
                w._52,
                p._2,
                shadow.sm
            )
        ),
        cls=combine_classes(dropdown, dropdown_modifiers.hover)
    )
    assert "dropdown" in dropdown_hover.attrs['class']
    assert "dropdown-hover" in dropdown_hover.attrs['class']
    
    # Force open dropdown
    dropdown_open = Div(
        Div("Button", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        Ul(
            Li(A("Item 1")),
            Li(A("Item 2")),
            tabindex="0",
            cls=combine_classes(
                dropdown_content,
                menu,
                bg_dui.base_100,
                border_radius.box,
                z._1,
                w._52,
                p._2,
                shadow.sm
            )
        ),
        cls=combine_classes(dropdown, dropdown_modifiers.open)
    )
    assert "dropdown" in dropdown_open.attrs['class']
    assert "dropdown-open" in dropdown_open.attrs['class']
    
    # Return all elements in a Div
    return Div(
        dropdown_hover,
        dropdown_open
    )

# Run the tests
test_dropdown_hover_and_state_fasthtml_examples()

<div>
  <div class="dropdown dropdown-hover">
    <div tabindex="0" role="button" class="btn m-1">Hover</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
  <div class="dropdown dropdown-open">
    <div tabindex="0" role="button" class="btn m-1">Button</div>
    <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
      <li>
<a href="#">Item 1</a>      </li>
      <li>
<a href="#">Item 2</a>      </li>
    </ul>
  </div>
</div>

test_func = test_dropdown_hover_and_state_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_dropdown_content_variations_fasthtml_examples

 test_dropdown_content_variations_fasthtml_examples ()

Test dropdown with different content types including cards and navbar integration.

Exported source

def test_dropdown_content_variations_fasthtml_examples():
    """Test dropdown with different content types including cards and navbar integration."""
    from fasthtml.common import Div, Ul, Li, A, P, H2, Nav
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_tailwind.utilities.spacing import m, p, ps
    from cjm_fasthtml_tailwind.utilities.layout import z, display_tw
    from cjm_fasthtml_tailwind.utilities.sizing import w, h
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_weight, font_family, text_color
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex, items, justify, flex_display
    from cjm_fasthtml_tailwind.utilities.svg import stroke
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_styles, btn_modifiers, btn_sizes
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    from cjm_fasthtml_daisyui.components.navigation.navbar import navbar
    from cjm_fasthtml_daisyui.components.data_display.card import card, card_body, card_title, card_sizes
    
    # Card as dropdown content
    dropdown_card = Div(
        Div("Click", tabindex="0", role="button", cls=combine_classes(btn, m._1)),
        Div(
            Div(
                P("This is a card. You can use any element as a dropdown."),
                cls=str(card_body)
            ),
            tabindex="0",
            cls=combine_classes(
                dropdown_content,
                card,
                card_sizes.sm,
                bg_dui.base_100,
                z._1,
                w._64,
                shadow.md
            )
        ),
        cls=str(dropdown)
    )
    assert "dropdown" in dropdown_card.attrs['class']
    assert "card" in dropdown_card.children[1].attrs['class']
    assert "dropdown-content" in dropdown_card.children[1].attrs['class']
    
    # Dropdown in navbar
    navbar_dropdown = Div(
        Div(
            A("daisyUI", cls=combine_classes(font_size.lg, font_weight.bold)),
            cls=str(ps._4)
        ),
        Div(
            Div(
                A("Button", cls=combine_classes(btn, btn_styles.ghost, border_radius.field)),
                Div(
                    Div(
                        "Dropdown",
                        tabindex="0",
                        role="button",
                        cls=combine_classes(btn, btn_styles.ghost, border_radius.field)
                    ),
                    Ul(
                        Li(A("Item 1")),
                        Li(A("Item 2")),
                        tabindex="0",
                        cls=combine_classes(
                            menu,
                            dropdown_content,
                            bg_dui.base_200,
                            border_radius.box,
                            z._1,
                            m.t._4,
                            w._52,
                            p._2,
                            shadow.sm
                        )
                    ),
                    cls=combine_classes(dropdown, dropdown_placement.end)
                ),
                cls=combine_classes(flex_display, items.stretch)
            ),
            cls=combine_classes(flex_display, flex.grow, justify.end, p.x._2)
        ),
        cls=combine_classes(navbar, bg_dui.base_200)
    )
    assert "navbar" in navbar_dropdown.attrs['class']
    dropdown_in_navbar = navbar_dropdown.children[1].children[0].children[1]
    assert "dropdown" in dropdown_in_navbar.attrs['class']
    assert "dropdown-end" in dropdown_in_navbar.attrs['class']
    
    # Helper dropdown with info icon
    info_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        ),
        tabindex="0",
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(h._4, w._4, stroke.current)
    )
    
    helper_dropdown = [
        "A normal text and a helper dropdown",
        Div(
            Div(
                info_icon,
                tabindex="0",
                role="button",
                cls=combine_classes(
                    btn,
                    btn_modifiers.circle,
                    btn_styles.ghost,
                    btn_sizes.xs,
                    text_dui.info
                )
            ),
            Div(
                Div(
                    H2("You needed more info?", cls=str(card_title)),
                    P("Here is a description!"),
                    tabindex="0",
                    cls=str(card_body)
                ),
                tabindex="0",
                cls=combine_classes(
                    card,
                    card_sizes.sm,
                    dropdown_content,
                    bg_dui.base_100,
                    border_radius.box,
                    z._1,
                    w._64,
                    shadow.sm
                )
            ),
            cls=combine_classes(dropdown, dropdown_placement.end)
        )
    ]
    helper_dropdown_div = helper_dropdown[1]
    assert "dropdown" in helper_dropdown_div.attrs['class']
    assert "dropdown-end" in helper_dropdown_div.attrs['class']
    assert "btn-circle" in helper_dropdown_div.children[0].attrs['class']
    assert "btn-ghost" in helper_dropdown_div.children[0].attrs['class']
    assert "btn-xs" in helper_dropdown_div.children[0].attrs['class']
    
    # Return all elements in a Div
    return Div(
        dropdown_card,
        navbar_dropdown,
        helper_dropdown[0],  # The text
        helper_dropdown_div  # The dropdown
    )

# Run the tests
test_dropdown_content_variations_fasthtml_examples()

<div>
  <div class="dropdown">
    <div tabindex="0" role="button" class="btn m-1">Click</div>
    <div tabindex="0" class="dropdown-content card card-sm bg-base-100 z-1 w-64 shadow-md">
      <div class="card-body">
        <p>This is a card. You can use any element as a dropdown.</p>
      </div>
    </div>
  </div>
  <div class="navbar bg-base-200">
    <div class="ps-4">
<a href="#" class="text-lg font-bold">daisyUI</a>    </div>
    <div class="flex flex-grow justify-end px-2">
      <div class="flex items-stretch">
<a href="#" class="btn btn-ghost rounded-field">Button</a>        <div class="dropdown dropdown-end">
          <div tabindex="0" role="button" class="btn btn-ghost rounded-field">Dropdown</div>
          <ul tabindex="0" class="menu dropdown-content bg-base-200 rounded-box z-1 mt-4 w-52 p-2 shadow-sm">
            <li>
<a href="#">Item 1</a>            </li>
            <li>
<a href="#">Item 2</a>            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
A normal text and a helper dropdown  <div class="dropdown dropdown-end">
    <div tabindex="0" role="button" class="btn btn-circle btn-ghost btn-xs text-info">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" tabindex="0" fill="none" class="h-4 w-4 stroke-current"><path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>    </div>
    <div tabindex="0" class="card card-sm dropdown-content bg-base-100 rounded-box z-1 w-64 shadow-sm">
      <div tabindex="0" class="card-body">
        <h2 class="card-title">You needed more info?</h2>
        <p>Here is a description!</p>
      </div>
    </div>
  </div>
</div>

test_func = test_dropdown_content_variations_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

Base Dropdown

Dropdown Placement

Dropdown Modifiers

Dropdown Test Examples

test_dropdown_basic_examples

test_dropdown_placement_examples

test_dropdown_modifiers_examples

test_dropdown_basic_fasthtml_examples

test_dropdown_placement_fasthtml_examples

test_dropdown_hover_and_state_fasthtml_examples

test_dropdown_content_variations_fasthtml_examples