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

| Property Name | Property description | Property Type | IsRequired | | -------------- | ---------------------------------------------------------------------- | ----------------- | ---------- | | label | The text or label displayed on the dropdown button. | string | | | icon | An icon displayed next to the text label on the dropdown button. | React.ReactNode | | | showIconOnly | If true, only the icon is displayed on the dropdown button. | bool | | | children | The content of the dropdown menu, typically DropdownItem components. | React.ReactNode | | | className | Custom class name for additional styling. | string | |

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>