A hover-triggered dropdown component that renders a list of clickable items with smart viewport-aware positioning using `getBoundingClientRect` and fixed positioning — designed to escape `overflow: hidden` containers like modals and sheets. ## Key Components ### Exports | Export | Type | Description | |---|---|---| | `HoverDropdown` | Component | Main dropdown component, triggered on hover (and click/tap) | | `HoverDropdownItem` | Interface | Shape for each dropdown row item | | `HoverDropdownRenderAnchorArgs` | Interface | Args passed to the `renderAnchor` slot | ### `HoverDropdownItem` Fields | Field | Description | |---|---| | `label` | Display text for the row | | `icon` | Optional leading icon node | | `href` | Makes the row a link; routed via `renderAnchor` | | `targetPlatform` | Forwarded to `renderAnchor` for routing decisions | | `path` | In-app doc-tree path forwarded to `renderAnchor` for chat nav | | `onClick` | Fallback click handler when no `href` is present | | `secondaryAction` | Independent icon-button at the row's right edge | ### Positioning Logic The dropdown prefers placement **right** of the trigger, falls back **left**, then falls back **above/below** based on the `side` prop and available viewport space. ## Usage Example ```typescript // Basic usage Blog Posts (3) // Chat consumer with custom anchor renderer and secondary action const items: HoverDropdownItem[] = [ { label: 'Q3 Report', href: '/docs/q3-report', targetPlatform: 'markdown', path: '/reports/q3', secondaryAction: { icon: , label: 'Ask about this', onClick: () => handleAsk('q3-report'), }, }, ] ( {children} )} > Documents ``` > **Source:** [`hover-dropdown.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/hover-dropdown.tsx)