Dropdown menu
Exports
Import these components from @mbsw/ui.
DropdownMenuDropdownMenuCheckboxItemDropdownMenuContentDropdownMenuGroupDropdownMenuItemDropdownMenuItemIndicatorDropdownMenuLabelDropdownMenuPortalDropdownMenuSeparatorDropdownMenuShortcutDropdownMenuSubDropdownMenuSubContentDropdownMenuSubTriggerDropdownMenuTriggerProps
The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.
DropdownMenuCheckboxItem
| Prop | Type | Requirement |
|---|---|---|
size | 'lg' | 'md' | 'sm' | Optional |
variant | 'default' | 'destructive' | Optional |
DropdownMenuItem
| Prop | Type | Requirement |
|---|---|---|
size | 'lg' | 'md' | 'sm' | Optional |
variant | 'default' | 'destructive' | Optional |
asChild | boolean | Conditional |
description | string | Conditional |
DropdownMenuLabel
| Prop | Type | Requirement |
|---|---|---|
asChild | boolean | Conditional |
children | ReactNode | ReactElement<unknown, string | JSXElementConstructor<any>> | Conditional |
DropdownMenuSubTrigger
| Prop | Type | Requirement |
|---|---|---|
size | 'lg' | 'md' | 'sm' | Optional |
Type reference
Show full types
Full TypeScript definitions, including prop combinations and inherited props.
TYPESCRIPT
import { type ComponentPropsWithoutRef, type ComponentRef, type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
export type DropdownMenuItemSize = 'lg' | 'md' | 'sm';
export type DropdownMenuItemVariant = 'default' | 'destructive';
type DropdownMenuContentPrimitiveProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
export type DropdownMenuContentProps = DropdownMenuContentPrimitiveProps & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.Content>>;
type DropdownMenuItemOwnProps = {
size?: DropdownMenuItemSize;
variant?: DropdownMenuItemVariant;
};
type DropdownMenuItemPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, 'asChild'>;
type DropdownMenuItemAsChildProps = {
asChild: true;
description?: never;
};
type DropdownMenuItemOwnedProps = {
asChild?: false | undefined;
description?: string;
};
export type DropdownMenuItemProps = DropdownMenuItemPrimitiveProps & DropdownMenuItemOwnProps & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.Item>> & (DropdownMenuItemAsChildProps | DropdownMenuItemOwnedProps);
export type DropdownMenuCheckboxItemProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & DropdownMenuItemOwnProps & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>>;
export type DropdownMenuSubTriggerProps = Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, 'asChild'> & Omit<DropdownMenuItemOwnProps, 'variant'> & RefAttributes<ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>>;
export type DropdownMenuProps = ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>;
export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;
export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & RefAttributes<HTMLDivElement>>;
export declare const DropdownMenuSub: import("react").FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
export declare function DropdownMenuPortal({ container, ...portalProps }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal>): import("react").JSX.Element;
export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
export declare function DropdownMenuContent({ align, avoidCollisions, className, ref, side, sideOffset, ...contentProps }: DropdownMenuContentProps): import("react").JSX.Element;
export declare function DropdownMenuItem({ children, className, description, ref, size, variant, ...itemProps }: DropdownMenuItemProps): import("react").JSX.Element;
export declare function DropdownMenuCheckboxItem({ children, className, ref, size, variant, ...checkboxItemProps }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
export declare const DropdownMenuItemIndicator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemIndicatorProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;
type DropdownMenuLabelPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>, 'asChild' | 'children'>;
export type DropdownMenuLabelProps = (DropdownMenuLabelPrimitiveProps & {
asChild?: false;
children?: ReactNode;
}) | (DropdownMenuLabelPrimitiveProps & {
asChild: true;
children: ReactElement;
});
export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<DropdownMenuLabelProps & RefAttributes<HTMLDivElement>>;
export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
export declare const DropdownMenuShortcut: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;
export declare function DropdownMenuSubTrigger(props: DropdownMenuSubTriggerProps): import("react").JSX.Element;
export declare const DropdownMenuSubContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;