Menu

Custom elements that appear on the screen wherever you want them to be positioned.

Example

Props

    🕹ī¸ standard props
    _top
    number
    Top position of the menu
    undefined
    _left
    number
    Left position of the menu
    undefined
    _width
    string
    Width of the menu
    "auto"
    _height
    string
    Height of the menu
    "auto"
    _maxHeight
    string
    Maximum height of the menu
    undefined
    _minWidth
    string
    Minimum width of the menu
    undefined
    _overflow
    string
    Overflow behavior of the menu
    "auto"
    _boxShadow
    string
    Box shadow styling for the menu
    undefined
    _borderRadius
    string
    Border radius of the menu
    undefined
    _activatorGap
    number
    Gap between the activator and menu
    5
    open
    boolean
    Controls the visibility of the menu
    false
    refreshPosition
    boolean
    Triggers recalculation of menu position
    false
    activator
    HTMLElement
    Element that triggers the menu
    undefined
    anchor
    "bottom" | "bottom-center" | "right" | "right-center" | "up" | "up-center" | "left" | "left-center"
    Defines the menu alignment
    "bottom"
    closeOnClickOutside
    boolean
    Closes the menu when clicking outside
    false
    inAnimation
    (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig
    Animation for menu entrance
    fly
    inAnimationConfig
    SlideParams | FlyParams | FadeParams
    Configuration for inAnimation
    { duration: 100, y: 10 }
    outAnimation
    (node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig
    Animation for menu exit
    fly
    outAnimationConfig
    SlideParams | FlyParams | FadeParams
    Configuration for outAnimation
    { duration: 100, y: 10 }
    menuElement
    HTMLElement
    Reference to the menu element
    undefined
    flipOnOverflow
    boolean
    Flips the menu if it overflows viewport
    false
    stayInViewport
    boolean
    Keeps the menu within the viewport
    false
    openingId
    string
    Unique identifier for the menu instance
    undefined
    🎨 style props
    No data available

Slots

    Children
    Content of the menu