@squiz/xaccel-dropdown v1.15.0-beta.1

Component Name

Description

The Dropdown component creates a customizable dropdown menu that supports keyboard navigation and accessibility features out of the box. It can display both textual and icon-based labels for the dropdown button, and automatically adjusts its opening direction based on screen space availability.

Components properties

Props Example:

<Dropdown
    label="More Actions"
    showIconOnly={true}
    icon={<MenuIcon />}
    className="customClass"
>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</Dropdown>

Usage

Install the package by running: npm i @squiz/xaccel-dropdown

import Dropdown from '@squiz/xaccel-dropdown';

<Dropdown
    label="Options"
    icon={<CustomIcon />}
    showIconOnly={false}
    className="customClass"
>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</Dropdown>