Skip to main content

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.