Dropdown

    Dropdown is set of structural components for building, accessible dropdown menus with close-on-click, keyboard navigation, and correct focus handling. As with all the react-overlay's components it's BYOS (Bring Your Own Styles). Dropdown is primarily built from three base components, you should compose to build your Dropdowns.

    • Dropdown: wraps the menu and toggle, and handles keyboard navigation
    • Dropdown.Toggle: generally a button that triggers the menu opening
    • Dropdown.Menu: the overlaid, menu, positioned to the toggle with PopperJS
    import Dropdown from 'react-overlays/Dropdown'

    alignEnd

    Align the menu to the 'end' side of the placement side of the Dropdown toggle. The default placement is top-start or bottom-start.

    type:boolean

    childrenrequired

    A render prop that returns the root dropdown element. The props argument should spread through to an element containing both the menu and toggle in order to handle keyboard events for focus management.

    type:{Function ({ props: { onKeyDown: (SyntheticEvent) => void, }, }) => React.Element}

    defaultShow

    Sets the initial show position of the Dropdown.

    type:boolean

    drop

    Determines the direction and location of the Menu in relation to it's Toggle.

    type:DropDirection

    focusFirstItemOnShow

    Controls the focus behavior for when the Dropdown is opened. Set to true to always focus the first menu item, keyboard to focus only when navigating via the keyboard, or false to disable completely

    The Default behavior is false unless the Menu has a role="menu" where it will default to keyboard to match the recommended ARIA Authoring practices.

    type:falsetrue'keyboard'

    itemSelector

    A css slector string that will return focusable menu items. Selectors should be relative to the menu component: e.g. > li:not('.disabled')

    type:string
    default:'* > *'

    onTogglerequired

    A callback fired when the Dropdown wishes to change visibility. Called with the requested show value, the DOM event, and the source that fired it: 'click','keydown','rootClose', or 'select'.

    function(
    isOpen: boolean,
    event: SyntheticEvent,
    ): void
    type:(nextShow: boolean, event: ReactSyntheticEvent) => void

    show

    Whether or not the Dropdown is visible.

    type:boolean