Popover - BKW Design System

Popover

Button-triggered popovers showing start, centered, and right-aligned menu surfaces, checked-icon items, and a six-item menu example in light and dark themes.

Available components

Start alignment

start alignment (light)

Open the menu with a BKW button to inspect the popover surface, list items, and alignment.

start alignment (dark)

Open the menu with a BKW button to inspect the popover surface, list items, and alignment.

Centered alignment

center alignment (light)

Open the menu with a BKW button to inspect the popover surface, list items, and alignment.

center alignment (dark)

Open the menu with a BKW button to inspect the popover surface, list items, and alignment.

Right alignment

end alignment (light)

Open the menu with a BKW button to inspect the popover surface, list items, and alignment.

end alignment (dark)

Open the menu with a BKW button to inspect the popover surface, list items, and alignment.

Items with checked icons

start alignment (light)

Open the menu with a BKW button to inspect popover items that include checked icons.

start alignment (dark)

Open the menu with a BKW button to inspect popover items that include checked icons.

Items with Link children

start alignment (light)

Popover items with Next.js Link children. Unternehmen is the current page; opening with the mouse must not highlight the first item.

start alignment (dark)

Popover items with Next.js Link children. Unternehmen is the current page; opening with the mouse must not highlight the first item.

Selectable menu

Selection (light)

Select an item, then reopen the menu: the selected item stays marked as current.

Selection (dark)

Select an item, then reopen the menu: the selected item stays marked as current.

Selectable menu with trigger label

Trigger shows selection (light)

Select an item: it becomes current and its label replaces the trigger text, like a select menu.

Trigger shows selection (dark)

Select an item: it becomes current and its label replaces the trigger text, like a select menu.

Six-item menu

start alignment (light)

Open the menu with a BKW button to inspect the six-item popover limit in a realistic app surface.

start alignment (dark)

Open the menu with a BKW button to inspect the six-item popover limit in a realistic app surface.