Popover

Popover

A context menu that displays when a button is clicked.

1234567891011121314151617181920212223
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ PopoverExample() {
	@popui.Popover(props.Popover{
		ID:          "popover-default",
		ButtonLabel: "···",
	}) {
		@popui.PopoverItem() {
			Edit
		}
		@popui.PopoverItem() {
			Duplicate
		}
		@popui.PopoverItem() {
			Delete
		}
	}
}

Right Aligned

Align the popover menu to the right side of the button

123456789101112131415161718192021222324
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ PopoverRightAlignedExample() {
	@popui.Popover(props.Popover{
		ID:          "popover-right",
		ButtonLabel: "···",
		RightAlign:  true,
	}) {
		@popui.PopoverItem() {
			Settings
		}
		@popui.PopoverItem() {
			Profile
		}
		@popui.PopoverItem() {
			Logout
		}
	}
}

API Reference

The main popover component that displays a context menu.

Name	Type	Default	Description
`ID` *	`string`	-	Unique identifier for the popover element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the menu container
`ButtonLabel`	`string`	-	Text label for the trigger button
`ButtonVariant`	`string`	-	Variant style for the trigger button (e.g., 'primary', 'secondary', 'transparent')
`RightAlign`	`bool`	`false`	Align the popover menu to the right side of the button

PopoverItem

Individual menu item within the popover.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the item element
`Class`	`string`	-	Additional CSS classes to merge with base styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes to apply to the list item