diff --git a/packages/vira-book/src/element-book/entries/vira-dropdown.element.book.ts b/packages/vira-book/src/element-book/entries/vira-dropdown.element.book.ts
index d3badb7c..8b2fbb35 100644
--- a/packages/vira-book/src/element-book/entries/vira-dropdown.element.book.ts
+++ b/packages/vira-book/src/element-book/entries/vira-dropdown.element.book.ts
@@ -134,7 +134,17 @@ export const viraDropdownPage = defineBookPage({
                                     newSelected[variationIndex] = event.detail;
                                     updateState({selected: newSelected});
                                 })}
-                            ></${ViraDropdown}>
+                            >
+                                ${exampleDropdownOptions.map((option) => {
+                                    return html`
+                                        ${ViraDropdownItem.assign({
+                                            value: option.value,
+                                            label: option.label,
+                                            selected: state.selected[variationIndex] === option,
+                                        })}
+                                    `;
+                                })}
+                            </${ViraDropdown}>
                         `;
                     });
                 },
diff --git a/packages/vira/src/elements/index.ts b/packages/vira/src/elements/index.ts
index 2346b404..687419c1 100644
--- a/packages/vira/src/elements/index.ts
+++ b/packages/vira/src/elements/index.ts
@@ -3,6 +3,7 @@
 export * from './define-vira-element';
 export * from './vira-button.element';
 export * from './vira-collapsible-wrapper.element';
+export * from './vira-dropdown-item.element';
 export * from './vira-dropdown.element';
 export * from './vira-icon.element';
 export * from './vira-image.element';
diff --git a/packages/vira/src/elements/vira-dropdown-item.element.ts b/packages/vira/src/elements/vira-dropdown-item.element.ts
new file mode 100644
index 00000000..aa69210e
--- /dev/null
+++ b/packages/vira/src/elements/vira-dropdown-item.element.ts
@@ -0,0 +1,31 @@
+import {defineElementEvent, html} from 'element-vir';
+import {defineViraElement} from './define-vira-element';
+import {ViraDropdownOption} from './vira-dropdown.element';
+
+export const ViraDropdownItem = defineViraElement<{
+    value: string;
+    label: string;
+    selected: boolean;
+}>()({
+    tagName: 'vira-dropdown-item',
+    events: {
+        onSelect: defineElementEvent<ViraDropdownOption>(),
+    },
+
+    renderCallback({dispatch, events, state, inputs, updateState}) {
+        return html`
+            <span
+                class="option ${inputs.selected ? 'selected' : ''}"
+                @click=${(event: Event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+
+                    dispatch(new events.onSelect({value: inputs.value, label: inputs.label}));
+                }}
+                role="option"
+            >
+                ${inputs.label}
+            </span>
+        `;
+    },
+});
diff --git a/packages/vira/src/elements/vira-dropdown-item.ts b/packages/vira/src/elements/vira-dropdown-item.ts
deleted file mode 100644
index f66f27b3..00000000
--- a/packages/vira/src/elements/vira-dropdown-item.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {html} from 'element-vir';
-import {defineViraElement} from './define-vira-element';
-
-export const ViraDropdownItem = defineViraElement<{
-    value: string;
-    label: string;
-}>()({
-    tagName: 'vira-dropdown-item',
-    renderCallback({dispatch, events, state, inputs, updateState}) {
-        return html`
-            <span
-                class="option ${selectedOptions
-                    .map((selectedItem) => selectedItem?.value)
-                    .includes(item.value)
-                    ? 'selected'
-                    : ''}"
-                @click=${(event: Event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    if (!inputs.isMultiSelect) {
-                        updateState({dropdownOpen: false});
-                        dispatch(new events.openChange(false));
-                    }
-                    dispatch(
-                        new events.selectChange(
-                            inputs.isMultiSelect
-                                ? inputs.value.includes(item.value)
-                                    ? inputs.value.filter((value) => value !== item.value)
-                                    : [
-                                          ...inputs.value,
-                                          item.value,
-                                      ]
-                                : [item.value],
-                        ),
-                    );
-                }}
-                role="option"
-            >
-                ${item.label}
-            </span>
-        `;
-    },
-});
diff --git a/packages/vira/src/elements/vira-dropdown.element.ts b/packages/vira/src/elements/vira-dropdown.element.ts
index 181593a7..4037a6c8 100644
--- a/packages/vira/src/elements/vira-dropdown.element.ts
+++ b/packages/vira/src/elements/vira-dropdown.element.ts
@@ -265,6 +265,9 @@ export const ViraDropdown = defineViraElement<{
                         ></${ViraIcon}>
                     </span>
                 </div>
+                <div class="select-options">
+                    <slot></slot>
+                </div>
                 <div class="select-options">
                     ${inputs.options.map(
                         (item) => html`