Deepyr Documentation

Dropdown using details and summary

Uses native HTML elements for the best accessibility. Opens and closes on click. The `Dropdown` component intelligently wraps the trigger in a `<summary>` tag.

// Define the reusable, type-safe content for the dropdown.
final menuContent = DropdownContent(
  [
    MenuItem([text('Item 1')]),
    MenuItem([text('Item 2')]),
  ],
  tag: 'ul',
  style: [
    DropdownContent.menu,
    Spacing.p(2),
    Effects.shadowSm,
    BgUtil.base100,
    Effects.roundedBox,
    Size.w(52),
  ],
);

// Use the content in the Dropdown.
Dropdown(
  method: DropdownMethod.details,
  trigger: Button([text('open or close')], classes: 'm-1'),
  content: menuContent,
)

Dropdown using popover API and anchor positioning

This is a new browser standard and is not yet fully supported. It must be built manually with primitive components as `deepyr` doesn't abstract it yet. The dropdown will appear centered like a modal in unsupported browsers.

// Popover API is a new browser feature and not yet abstracted by the Dropdown component.
// It requires manual construction with unique IDs and anchor names.

// Trigger Button
button(
  [text('Button')],
  classes: 'btn',
  attributes: {
    'popovertarget': 'popover-1',       // ID of the popover content
    'style': 'anchor-name: --anchor-1;', // Unique anchor name
  },
),

// Popover Content
ul(
  [
    li([a(href: '#', [text('Item 1')])]),
    li([a(href: '#', [text('Item 2')])]),
  ],
  id: 'popover-1', // Matches popovertarget
  classes: 'dropdown menu w-52 rounded-box bg-base-100 shadow-sm',
  attributes: {
    'popover': '', // Enables popover behavior
    'style': 'position-anchor: --anchor-1;', // Links to anchor name
  },
)

Dropdown menu

Dropdown(
  method: DropdownMethod.focus,
  // Per DaisyUI spec for this method, the trigger should be a focusable `div`.
  trigger: Container(
    [text('Click to open')],
    tag: 'div',
    attributes: {'tabindex': '0', 'role': 'button'},
    classes: 'btn m-1',
  ),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown / aligns to start of button horizontally

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.start],
  trigger: Button([text('Click ⬇️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown / aligns to end of button horizontally

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.end],
  trigger: Button([text('Click ⬇️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown / aligns to center of button horizontally

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.center],
  trigger: Button([text('Click ⬇️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown top

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.top],
  trigger: Button([text('Click ⬆️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown top / aligns to center of button horizontally

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.top, Dropdown.center],
  trigger: Button([text('Click ⬆️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown top / aligns to end of button horizontally

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.top, Dropdown.end],
  trigger: Button([text('Click ⬆️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown bottom (default)

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.bottom],
  trigger: Button([text('Click ⬇️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown bottom (default) / aligns to center of button horizontally

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.bottom, Dropdown.center],
  trigger: Button([text('Click ⬇️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown bottom (default) / aligns to end of button horizontally

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.bottom, Dropdown.end],
  trigger: Button([text('Click ⬇️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown left

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.left],
  trigger: Button([text('Click ⬅️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown left / aligns to center of button vertically

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.left, Dropdown.center],
  trigger: Button([text('Click ⬅️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown left / aligns to end of button vertically

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.left, Dropdown.end],
  trigger: Button([text('Click ⬅️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown right

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.right],
  trigger: Button([text('Click ➡️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown right / aligns to center of button vertically

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.right, Dropdown.center],
  trigger: Button([text('Click ➡️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown right / aligns to end of button vertically

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.right, Dropdown.end],
  trigger: Button([text('Click ➡️')], classes: 'm-1'),
  content: menuContent, // Reusing the type-safe content component
)

Dropdown on hover

Dropdown(
  method: DropdownMethod.focus, // Hover requires the focus method
  style: [Dropdown.hover],
  trigger: Button([text('Hover')], classes: 'm-1'),
  content: menuContent,
)

Force open

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.open],
  trigger: Button([text('Button')], classes: 'm-1'),
  content: menuContent,
)

Card as dropdown

Dropdown(
  method: DropdownMethod.focus,
  trigger: Button([text('Click')], classes: 'm-1'),
  content: DropdownContent(
    [
      CardBody([
        p([text('This is a card. You can use any element as a dropdown.')]),
      ]),
    ],
    style: [
      DropdownContent.card,
      Size.w(64),
      Spacing.p(2),
      Effects.shadow,
      BgUtil.base100,
      TextUtil.baseContent,
    ],
  ),
)

Dropdown in navbar

// To precisely match the DaisyUI example's visual layout, we replicate its
// flexbox structure inside the NavbarEnd instead of using a semantic Menu.
Navbar(
  style: [BgUtil.base200, Spacing.mb40],
  ariaLabel: 'Navbar with dropdown example',
  [
    NavbarStart([
      Button([text('daisyUI')], style: [Button.ghost], classes: 'text-lg font-bold'),
    ]),
    NavbarEnd([
      // A container to replicate `<div class="flex items-stretch">`
      Container(
        style: [Layout.flex, Alignment.itemsStretch],
        [
          Button([text('Button')], style: [Button.ghost], classes: 'rounded-field'),
          Dropdown(
            method: DropdownMethod.focus,
            style: [Dropdown.end],
            // The trigger is a focusable Container styled as a button
            trigger: Container(
              [text('Dropdown')],
              tag: 'div',
              attributes: {'tabindex': '0', 'role': 'button'},
              classes: 'btn btn-ghost rounded-field',
            ),
            content: DropdownContent(
              [
                MenuItem([text('Item 1')]),
                MenuItem([text('Item 2')]),
              ],
              tag: 'ul',
              style: [
                DropdownContent.menu,
                Spacing.p(2),
                Effects.shadowSm,
                BgUtil.base200,
                Effects.roundedBox,
                Size.w(52),
                Spacing.mt(4),
                Layout.z(1),
              ],
            ),
          ),
        ],
      ),
    ]),
  ],
)

Helper dropdown

A normal text and a helper dropdown

Dropdown(
  method: DropdownMethod.focus,
  style: [Dropdown.end],
  trigger: Button(
    [Icon('info')],
    style: [Button.circle, Button.ghost, Button.xs],
    classes: 'text-info',
  ),
  content: DropdownContent(
    [
      CardBody([
        CardTitle([text('You needed more info?')]),
        p([text('Here is a description!')]),
      ]),
    ],
    style: [
      DropdownContent.card,
      Size.w(64),
      Effects.shadow,
      BgUtil.base100,
      TextUtil.baseContent,
    ],
  ),
)

Method 1: <details> and <summary>

Method 2: Popover API and anchor positioning

Dropdown menu

Positions

Modifiers

Force open

More examples