Composites & Sections · 7 Props

Dropdown

Alpine.js-powered dropdown menu with items supporting labels, icons, hrefs, keyboard shortcuts, dividers, and disabled states.

Composites & Sections 7 Props

src/components/blocks/Dropdown.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
class	string	""
icon	string	—
items	object[]	[]
items[].disabled	boolean	—
items[].divider	boolean	—
items[].href	string	—
items[].icon	string	—
items[].label *	string	—
items[].shortcut	string	—
items[].target	string	—
label	string	Menü
position	string	left	"left" \| "right"
size	string	md	"sm" \| "md"
variant	string	default	"default" \| "outline" \| "ghost"

Beispiele

Default

With icons, shortcuts, dividers, disabled items, and position variants.

Edit Duplicate ⌘D

Archive

Option A Option B

{
  "type": "row",
  "props": {
    "gap": "md",
    "align": "start",
    "wrap": true
  },
  "blocks": [
    {
      "type": "dropdown",
      "props": {
        "label": "Actions",
        "icon": "solar:settings-minimalistic-line-duotone",
        "variant": "outline",
        "items": [
          {
            "label": "Edit",
            "icon": "solar:pen-line-duotone",
            "href": "#"
          },
          {
            "label": "Duplicate",
            "icon": "solar:copy-line-duotone",
            "href": "#",
            "shortcut": "⌘D"
          },
          {
            "divider": true,
            "label": ""
          },
          {
            "label": "Archive",
            "icon": "solar:archive-line-duotone",
            "href": "#",
            "disabled": true
          }
        ]
      }
    },
    {
      "type": "dropdown",
      "props": {
        "label": "Position Right",
        "position": "right",
        "items": [
          {
            "label": "Option A",
            "href": "#"
          },
          {
            "label": "Option B",
            "href": "#"
          }
        ]
      }
    }
  ]
}

<Row gap="md" align="start" wrap>
  <Dropdown
    label="Actions"
    icon="solar:settings-minimalistic-line-duotone"
    variant="outline"
    items={[{"label":"Edit","icon":"solar:pen-line-duotone","href":"#"},{"label":"Duplicate","icon":"solar:copy-line-duotone","href":"#","shortcut":"⌘D"},{"divider":true,"label":""},{"label":"Archive","icon":"solar:archive-line-duotone","href":"#","disabled":true}]}
  />
  <Dropdown
    label="Position Right"
    position="right"
    items={[{"label":"Option A","href":"#"},{"label":"Option B","href":"#"}]}
  />
</Row>