# `hb-dropdown-simple` (dropdown-simple)

**Category:** overlays  
**Tags:** overlays, menu

## Overview

`hb-dropdown-simple` is a Bulma-styled dropdown: a clickable trigger opens a floating menu built from a declarative `list`. Plain rows dispatch a selection event with the item `key` and close the menu; rows with `linkHref` render as normal links instead. The component also reports open/close toggles so you can sync state with the host page.

## Custom element

```html
<hb-dropdown-simple></hb-dropdown-simple>
```

Tag name: `hb-dropdown-simple` (see `component.wc.svelte`).

## Public API (props / attributes)

Web component attributes are **strings** in HTML. Use **snake_case** names where your tooling maps props to attributes (same logical names as the TypeScript `Component` type).

| Prop | Type (authoring) | HTML / notes |
| --- | --- | --- |
| `id` | `string` (optional) | Passed through on `dropdownSwitch` so multiple instances can be distinguished. |
| `style` | `string` (optional) | Standard host styling; the implementation also reads `float` on the host to choose a default `position` when `position` is omitted. |
| `position` | `"left"` \| `"right"` (optional) | Aligns the menu (`is-right` when `"right"`). If unset, `position` defaults to `"right"` when the host element’s **inline** `style.float` is `"right"`, otherwise `"left"`. |
| `list` | `IDropDownMenuListItem[]` | **JSON string** in HTML. Each item should include at least `key` and `label`. Optional: `badge`, `group`, `linkHref`. The component parses JSON when the runtime value is not already a usable array shape. |
| `open` | `boolean` or `"yes"` \| `"no"` | Controls the open state (`is-active`). String `"yes"` and boolean `true` open; `"no"` and `false` close. **Note:** an empty string for `open` is treated like open (`true`) in the current implementation. |

### List item shape (`IDropDownMenuListItem`)

- **`key`** (string) — Identifier emitted with `dropDownClick` for non-link rows.
- **`label`** (string) — Visible text for the row.
- **`badge`** (number, optional) — Present in the public type for richer menus; the default markup does not render it.
- **`group`** (string, optional) — Same as `badge`: typed for integrations; not rendered by the default template.
- **`linkHref`** (string, optional) — If set, the row is an `<a class="dropdown-item">` to that URL instead of a clickable div that emits `dropDownClick`.

## Slots

| Slot | Purpose |
| --- | --- |
| `dropdownbutton` | Content of the trigger. Default fallback text is `btn`. The host wraps this slot in a clickable region that toggles the menu. |

## Events

Listen with `addEventListener` using the **exact** event names below (they are case-sensitive).

| Event | `detail` | When |
| --- | --- | --- |
| `dropdownSwitch` | `{ open: boolean; id: string }` | Whenever the user toggles the menu via the trigger (open becomes the new state). |
| `dropDownClick` | `{ key: string }` | When the user activates a **non-link** menu row (`linkHref` not set). The implementation then toggles the menu closed. |

Rows with **`linkHref`** are rendered as links only; they do not dispatch `dropDownClick` from this component.

## Styling

Theming uses **Bulma CSS variables** on `:host`. Common tokens referenced for this component:

| Variable | Role |
| --- | --- |
| `--bulma-scheme-main` | Background of the floating menu panel (`dropdown-content`). |
| `--bulma-border` | Border color for the menu and separators between items. |
| `--bulma-text` | Default text color for menu rows and the trigger area. |
| `--bulma-link` | Accent for link rows (`linkHref`) and interactive hover states. |

See the [Bulma CSS variables documentation](https://bulma.io/documentation/features/css-variables/) for the full variable set.

### CSS `::part` names

| Part | Targets | Typical overrides |
| --- | --- | --- |
| `dropdown` | Bulma `dropdown` root (active/right modifiers) | Layout, margins, `z-index` for stacking. |
| `dropdownbutton` | Wrapper around the `dropdownbutton` slot | Padding, min-width, typography on the control. |
| `dropdowncontent` | Floating `dropdown-menu` panel | Width, max-height, shadow for the opened list. |

## Behavior summary

1. Clicking the trigger toggles open/closed and emits `dropdownSwitch`.
2. Clicking a row **without** `linkHref` runs `dropDownClick` with that row’s `key`, then closes the menu.
3. Rows **with** `linkHref` behave like normal links; closing the menu is left to navigation or host logic.

## Minimal HTML example

```html
<hb-dropdown-simple
  list='[{"key":"a","label":"Option A"},{"key":"b","label":"Option B"}]'
  position="left"
></hb-dropdown-simple>
```

Example with a link row and controlled openness (strings `yes` / `no`):

```html
<hb-dropdown-simple
  id="actions-1"
  open="yes"
  list='[{"key":"edit","label":"Edit"},{"key":"docs","label":"Docs","linkHref":"https://example.com/docs"}]'
></hb-dropdown-simple>
```

## Package metadata (from docs)

- **npm:** `@htmlbricks/hb-dropdown-simple`
- **IIFE bundle:** `main.iife.js` (see your build / CDN layout for this package).