Dropdowns
uiCategories.overlaysModals.components.showcases.dropdowns.description
Installation
Import
Usage
uiCategories.overlaysModals.components.showcases.dropdowns.usage
Design Guidelines
uiCategories.overlaysModals.components.showcases.dropdowns.designGuidelines
uiCategories.overlaysModals.components.showcases.dropdowns.examples.basicUsage.title
uiCategories.overlaysModals.components.showcases.dropdowns.examples.basicUsage.description
uiCategories.overlaysModals.components.showcases.dropdowns.examples.withIcons.title
uiCategories.overlaysModals.components.showcases.dropdowns.examples.withIcons.description
uiCategories.overlaysModals.components.showcases.dropdowns.examples.withSeparators.title
uiCategories.overlaysModals.components.showcases.dropdowns.examples.withSeparators.description
uiCategories.overlaysModals.components.showcases.dropdowns.examples.withSubmenu.title
uiCategories.overlaysModals.components.showcases.dropdowns.examples.withSubmenu.description
uiCategories.overlaysModals.components.showcases.dropdowns.examples.composedDropdown.title
uiCategories.overlaysModals.components.showcases.dropdowns.examples.composedDropdown.description
DropdownMenu
uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenu.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
open | boolean | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenu.props.open.description |
defaultOpen | boolean | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenu.props.defaultOpen.description |
onOpenChange | (open: boolean) => void | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenu.props.onOpenChange.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DropdownMenuTrigger
uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuTrigger.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
tooltip | string | React.ComponentProps<typeof TooltipContent> | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuTrigger.props.tooltip.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
className | string | — | packages.commonProps.className.description |
DropdownMenuContent
uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuContent.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "bottom" | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuContent.props.side.description |
align | "start" | "center" | "end" | "start" | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuContent.props.align.description |
sideOffset | number | 4 | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuContent.props.sideOffset.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DropdownMenuItem
uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuItem.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
disabled | boolean | false | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuItem.props.disabled.description |
onSelect | (event: Event) => void | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuItem.props.onSelect.description |
children | React.ReactNode | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuItem.props.children.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
DropdownMenuSeparator
uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.dropdownMenuSeparator.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
ComposedDropdownMenu
uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.composedDropdownMenu.description packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
Trigger | React.ComponentType | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.composedDropdownMenu.props.Trigger.description |
TriggerProps | object | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.composedDropdownMenu.props.TriggerProps.description |
items | ItemOption[] | — | uiCategories.overlaysModals.components.showcases.dropdowns.composedComponents.composedDropdownMenu.props.items.description |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Accessibility
Accessibility features and considerations
uiCategories.overlaysModals.components.showcases.dropdowns.accessibility