foo-webview-sdk
    Preparing search index...

    Interface MenuPopupOptions

    Optional presentation configuration for menu.show / menu.popup.

    Every field is applied per call, so a page can follow its own theme state on each right-click. Omitted fields keep their documented defaults.

    interface MenuPopupOptions {
        backdrop?: "none" | "acrylic" | "mica" | "mica-alt";
        backdropDarkMode?: boolean;
        closeAnimationMs?: number;
        css?: string;
        cssReplace?: boolean;
        windowModel?: "fullscreen" | "contentSized";
    }
    Index
    backdrop?: "none" | "acrylic" | "mica" | "mica-alt"

    DWM system backdrop for the menu window, sharing the effect vocabulary of the main / tabbed windows (mapped to DWM DWMSBT_*): 'none' (no backdrop), 'mica', 'mica-alt' and 'acrylic'.

    Default 'acrylic' — the transient-surface material, which is the correct default for a pop-up menu. 'mica' / 'mica-alt' are designed as main-window / tabbed-window backgrounds and may look off on a transient menu. The material is only visible through a translucent menu background, so pair it with a translucent .fb-menu background via css. Acrylic needs Windows 11 22H2 or newer; Windows 10 degrades to whatever backdrop the system supports.

    Warning: the DWM backdrop is a window-level, all-or-nothing effect: it appears / disappears the instant the window is shown / hidden and cannot fade with CSS animations (see closeAnimationMs). For an animated open / close, set this to 'none' and give .fb-menu a translucent background via css — a CSS translucent background has no real blur, which is the trade-off.

    backdropDarkMode?: boolean

    Dark tint for the backdrop. Default true; pass false to follow a light theme. Applied together with backdrop on every open.

    closeAnimationMs?: number

    Exit (fade-out) animation duration in milliseconds.

    Default 0 — the menu hides immediately on close with no exit animation. When > 0 (clamped to 0..1000), a user-initiated close (clicking outside, Escape, selecting an item, or losing focus) first plays an exit transition for this many milliseconds before the window is hidden. Set it to roughly your own #menu.out transition duration so the fade finishes just as the window disappears.

    On close the renderer toggles the root menu's class from #menu.in to #menu.out; the built-in #menu.out rule mirrors the entry animation, and you can override it via css. The replaced (a new menu opening over this one) and internal timeout close paths always hide immediately, regardless of this value.

    Warning: this animates the web content only — not the DWM backdrop, a window-level effect that snaps in / out with it. With acrylic / mica enabled, the backdrop pops while the content fades, so the transition is out of sync. For a fully smooth fade, use a CSS translucent background (backdrop 'none' plus a translucent .fb-menu background via css) rather than the DWM backdrop.

    css?: string

    Frontend style takeover. The CSS string (at most 256 KiB) is injected into the overlay's dedicated <style> layer and applied on every open.

    By default this is override / append mode: your rules sit on top of the built-in styles, so target the menu's stable class names — .fb-menu, .fb-item (with .nrm / .disabled / .active / .checked / .has-sub), .fb-item-ico, .fb-arrow, .fb-sep, the now-playing .fb-np*, rating .fb-rating* / .fb-star, slider .fb-slider*, and segmented .fb-seg* — and win by source order or !important. (The overlay is an isolated top-level document, so a host page's ::part() cannot reach it; the stable class hooks are the supported styling contract.) A small protected structural layer (#viewport, menu box-sizing / fixed positioning / overflow, and the hidden-state fallback) is always force-applied last.

    For a translucent menu, keep the background alpha around 0.75–0.9: that preserves text contrast, and Windows 11's own system menus are similarly restrained about how much they let through.

    cssReplace?: boolean

    When true, switches css from override/append to replace mode: the built-in default styles are disabled and only your css plus the protected structural layer remain, so the menu's entire look (including the entry animation) is yours to define. Default false.

    windowModel?: "fullscreen" | "contentSized"

    Window geometry model for the self-drawn menu (default 'fullscreen').

    • 'contentSized': the menu is drawn in a compact window measured to the menu content, with the root and its first-level submenu in separate, tightly sized popup windows. Each panel therefore carries the real DWM backdrop material across its own surface plus the system window shadow. This is the recommended model for a context menu.
    • 'fullscreen': the compatibility default — one fullscreen overlay window hosting the menu DOM.