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

<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 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

<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):

<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).