Dropdown

Available since version 23.28.0

A contextual menu or content area that appears when a user interacts with a specific element, such as a button.

Basic usage


import { Dropdown, DropdownTrigger, DropdownContent } from "@krakentech/coral";
 
<Dropdown>
    <DropdownTrigger asChild>
        <Button size="small" color="secondary" variant="outlined">
            Menu
        </Button>
    </DropdownTrigger>
    <DropdownContent>Content</DropdownContent>
</Dropdown>

Aria labelled by

Name	Description	Default
`ariaLabelledBy`	The `id` of the element that describes the Dropdown. This should be an id of a child element. `string`	""


<Dropdown ariaLabelledBy="dropdown-title">
    <DropdownTrigger asChild>
        <Button size="small" color="secondary" variant="outlined">
            Menu
        </Button>
    </DropdownTrigger>
    <DropdownContent>
        <Typography id="dropdown-title">Dropdown Title</Typography>
    </DropdownContent>
</Dropdown>

Placement

Name	Description	Default
`placement`	The placement of the dropdown relative to the trigger. `bottom`, `bottom-end`, `bottom-start`, `left`, `left-end`, `left-start`, `right`, `right-end`, `right-start`, `top`, `top-end`, `top-start`	`bottom-start`


<Dropdown placement="top">
    <DropdownTrigger asChild>
        <Button size="small" color="secondary" variant="outlined">
            Menu
        </Button>
    </DropdownTrigger>
    <DropdownContent>Content</DropdownContent>
</Dropdown>

Note: This component uses Floating UI to calculate the position of the dropdown content — if there is not enough space in the viewport, it will automatically adjust the position to fit.

Offset

Name	Description	Default
`offset`	The distance in pixels between the trigger and the dropdown. `number`	`12`


<Dropdown offset={40}>
    <DropdownTrigger asChild>
        <Button size="small" color="secondary" variant="outlined">
            Menu
        </Button>
    </DropdownTrigger>
    <DropdownContent>Content</DropdownContent>
</Dropdown>

`useCoralDropdown()`

The Dropdown has its own context made available to the consumer via the useCoralDropdown hook. This hook provides the following properties:

Name	Description
`open`	A boolean value indicating whether the Dropdown is open or not. `boolean`
`openDropdown`	A function to set the Dropdown open. `() => void`
`closeDropdown`	A function to set the Dropdown closed `() => void`


const { open, openDropdown, closeDropdown } = useCoralDropdown();

Example usage:


import { Dropdown, useCoralDropdown } from '@krakentech/coral';
 
const CustomTrigger = () => {
    const { open } = useCoralDropdown();
 
    return (
        <DropdownTrigger asChild>
            <Button
                color="secondary"
                variant="outlined"
                endIcon={
                    open ? (
                        <IconChevronUp size={16} />
                    ) : (
                        <IconChevronDown size={16} />
                    )
                }
            >
                Menu
            </Button>
        </DropdownTrigger>
    );
};
 
const CustomContent = () => {
    const { closeDropdown } = useCoralDropdown();
 
    return (
        <DropdownContent>
            <Button
                size="small"
                color="secondary"
                variant="outlined"
                onClick={closeDropdown}
            >
                Close dropdown
            </Button>
        </DropdownContent>
    );
};
 
<Dropdown>
    <CustomTrigger />
    <CustomContent />
</Dropdown>;

Full API

Name	Description	Default
`ariaLabelledBy`	The `id` of the element that describes the Dropdown. This should be an id of a child element. `string`	”
`placement`	The placement of the dropdown relative to the trigger. `bottom`, `bottom-end`, `bottom-start`, `left`, `left-end`, `left-start`, `right`, `right-end`, `right-start`, `top`, `top-end`, `top-start`	`bottom-start`
`offset`	The distance in pixels between the trigger and the dropdown. `number`	`12`
`disableEscapeKeyDown`	Optionally disable the Escape keyboard handler `boolean`	`false`

DropdownTrigger

Name	Description	Default
`asChild`	Pass the functionality of the trigger down to the given child element `boolean`	`false`

DropdownContent

Name	Description	Default
`padding`	The padding around the content of the dropdown. The same padding settings as our Card component. `none`, `xsmall`, `small`, `medium`, `large`	`medium`
`theme`	The theme of the Card wrapping the DropdownContent children. `dark`, `mid`, `midLight`, `light`, `tertiaryLight`	`dark`
`borderless`	Whether the Card should be borderless. `boolean`	`true`