Dropdown

A generic dropdown component. Can be used as is, or to build more specific components like a tooltip or a popover.

Import

import { Dropdown } from '@pixby/ui';

• Dropdown: The component that provides the context to the other components.
• Dropdown.Trigger: Passes the onClick to your button, which opens the dropdown.
• Dropdown.Content: The actual dropdown element to which you pass your content.

Usage

The dropdown is stateful by default so you can just us it without adding any of your own logic. See controlled example below on how to control is yourself.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Props

placement

You can change the placement of the dropdown using the placement prop. The default is auto which means that the dropdown will try to fit on the screen.

Supported placements

• auto
• bottom
• bottom-end
• bottom-start
• left
• left-end
• left-start
• right
• right-end
• right-start
• top
• top-end
• top-start

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

trigger

Use the trigger prop to choose when the dropdown should open. It can be either click or hover. Defaults to click.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Controlled mode

By passing isOpen you make the dropdown a controlled component, and you are then responsible for the opening and closing.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

note

It's still recommended to use the Dropdown.Trigger component, and pass onOpen to the Dropdown like in the example above. Dropdown.Trigger makes sure the dropdown is positioned correctly.

onClose can be passed to the Dropdown component if you want to support closing the dropdown on outside click.

Accessability

Dropdown follows the practices for dialogs found at WAI-ARIA Authoring Practices.

• Focus is moved to Dropdown.Content when the dropdown is opened.
• Dropdown.Content keeps the focus inside the content when tabbing.
• The trigger has aria-haspopup set to true.
• When dropdown is closed, focus is moved back to the trigger.
• Pressing Esc closes the dropdown.
• If trigger is set to hover, focus and blur toggles of the trigger the dropdown.