hb-dropdown-notifications — dropdown-notifications

Package: @htmlbricks/hb-dropdown-notifications
Category: overlays
Tags: overlays, menu, notifications

What it does

hb-dropdown-notifications is a notification menu built as a Bulma dropdown: a bell trigger toggles the is-active state on the root dropdown. The panel includes a fixed “Notifications” header, an optional “Clear all” link when clearurl is non-empty, a default slot for your notification rows, and an optional “View all” footer when viewurl is non-empty. Set align to right to add Bulma’s is-right class so the menu aligns toward the end of the bar (typical for navbar-end placement).

Behavior notes for integrators:

• Open state is toggled only by clicking the bell button (aria-expanded updates accordingly). There is no built-in document click-outside handler; closing after navigation or custom UX is up to the host page or a wrapper.
• “Clear all” and “View all” are plain <a href="…"> links; they do not emit custom events (the public Events type is empty).

Custom element

hb-dropdown-notifications

Attributes (snake_case; string values in HTML)

Web component attributes are strings. Align with your HTML Bricks / build conventions for optional empty strings.

| Attribute | Required | Description | | --- | --- | --- | | id | No | Optional element identifier (see your generated typings for host binding). | | style | No | Optional inline style string for host-level styling (declared on the Component type). | | clearurl | No | URL for Clear all. If empty or omitted, the link is not rendered. | | viewurl | No | URL for View all. If empty or omitted, the footer block (divider + link) is not rendered. | | align | No | left or right (default left). right applies is-right on the dropdown. |

In HTML, pass attributes as strings; use "" for URLs you want omitted.

Events

None. The component does not declare custom events on its public Events type.

Accessibility

The bell control is a <button type="button"> with:

• aria-label="Notifications menu"
• aria-haspopup="true"
• aria-expanded bound to open state
• aria-controls="dropdown-notifications-menu" pointing at the menu container (role="menu")

Ensure slotted items are keyboard-focusable and labeled appropriately if they are interactive.

Styling (CSS custom properties)

Theme the panel and chrome with Bulma variables on :host. Optional helpers support muted text inside slotted markup when you use rgba(var(--x-muted-rgb), var(--x-text-opacity)) patterns.

| Variable | Role | | --- | --- | | --bulma-scheme-main | Background of the dropdown panel (dropdown-content). | | --bulma-border | Dividers and menu borders. | | --bulma-text | Header label and default body text in the panel. | | --bulma-link | “Clear all” / “View all” link color. | | --x-muted-rgb | Comma-separated RGB triplet (e.g. 115, 130, 140) for muted slotted copy. | | --x-text-opacity | Opacity multiplier (typically 0–1) paired with --x-muted-rgb. |

See Bulma CSS variables for the full theme map.

CSS ::part

None. Style via host custom properties, Bulma classes on slotted nodes, and global Bulma utilities as needed.

Slots

| Slot | Description | | --- | --- | | (default) | Content between the fixed Notifications header and the optional View all footer. Place each notification as a Bulma dropdown-item (or equivalent) for correct spacing. The title row and footer links are not slotted. |

Integration patterns

1. Rows in the default slot — wrap each entry in dropdown-item (and optional is-active / media / text utilities) so spacing matches Bulma’s dropdown content.
2. Footer off — omit meaningful URLs by setting clearurl and/or viewurl to empty strings so those sections disappear.
3. Navbar end — use align="right" so the menu does not overflow off the right edge of the viewport.

Minimal HTML example

<hb-dropdown-notifications
  clearurl=""
  viewurl="/notifications"
  align="right"
>
  <div class="dropdown-item">Sample notification</div>
</hb-dropdown-notifications>

Example with both footer actions

<hb-dropdown-notifications
  clearurl="/api/notifications/clear"
  viewurl="/notifications"
  align="left"
>
  <a href="/notifications/1" class="dropdown-item">Order #1024 shipped</a>
  <a href="/notifications/2" class="dropdown-item">New message from support</a>
</hb-dropdown-notifications>