Dropdown
The Dropdown component is a versatile UI element that allows users to select an option from a list of choices. It's commonly used in forms, navigation menus, and other interactive interfaces.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Dropdown from '@start-base/start-ui/Dropdown';
import FloatingMenuItem from '@start-base/start-ui/FloatingMenuItem';
import Button from '@start-base/start-ui/Button';Usages
API
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactElement[] | Child elements of the dropdown | |
| component | ReactElement | Component to trigger the dropdown | |
| label | string | Label for nested dropdown items | |
| className | string | CSS class for the dropdown container | |
| menuClassName | string | CSS class for the dropdown menu | |
| onFocus | function | Callback function when dropdown gains focus | |
| placement | string | Positioning of the dropdown menu. Variants: top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end |