Layout & Containers
Popup
A lightweight anchored popover. Positions floating content relative to an anchor (slotted into anchor), with placement, an optional arrow, and click / hover / manual triggers. Flips on the main axis when it would overflow the viewport.
Preview
Section titled “Preview”Popup content
<nana-popup placement="bottom-start" arrow>
<nana-button slot="anchor" variant="secondary">Click me</nana-button>
<div style="padding: 0.75rem 1rem">Popup content</div>
</nana-popup>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/popup";Basic usage
Section titled “Basic usage”<nana-button>Anchor</nana-button>Triggers & placement
Section titled “Triggers & placement”Use trigger="click" (default) or trigger="hover", and set placement
(top, bottom-start, right, …).
Shown on hover
<nana-popup trigger="hover" placement="top" arrow>
<nana-button slot="anchor" variant="secondary">Hover me</nana-button>
<div style="padding: 0.75rem 1rem">Shown on hover</div>
</nana-popup>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
arrow | arrow | boolean | false | Show a pointing arrow |
open | open | boolean | false | Open state |
placement | placement | PopupPlacement | 'bottom' | Where the popup sits relative to the anchor |
trigger | trigger | PopupTrigger | 'click' | How the popup is triggered |
Events
| Event | Description |
|---|---|
nana-show | Fired when the popup opens |
nana-hide | Fired when the popup closes |
Slots
| Slot | Description |
|---|---|
anchor | The trigger element |
(default) | The floating content |
CSS parts
| Part | Description |
|---|---|
::part(popup) | The floating panel |
::part(arrow) | The arrow |
CSS custom properties
| Property | Description |
|---|---|
--nana-popup-bg | Panel background |
--nana-popup-radius | Panel corner radius |
--nana-popup-padding | Panel padding |
--nana-popup-z | Stacking order for the floating panel |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-show | CustomEvent | Fired when the popup opens |
nana-hide | CustomEvent | Fired when the popup closes |
| Slot | Description |
|---|---|
anchor | The trigger element |
(default) | The floating content |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-popup-bg | Panel background |
--nana-popup-radius | Panel corner radius |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
popup | The floating panel |
arrow | The pointing arrow |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Popup interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook