Dropdown menu

Exports

Import these components from @mbsw/ui.

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

DropdownMenuCheckboxItem

DropdownMenuCheckboxItem props
PropTypeRequirement
size'lg' | 'md' | 'sm'Optional
variant'default' | 'destructive'Optional

DropdownMenuItem

DropdownMenuItem props
PropTypeRequirement
size'lg' | 'md' | 'sm'Optional
variant'default' | 'destructive'Optional
asChildbooleanConditional
descriptionstringConditional

DropdownMenuLabel

DropdownMenuLabel props
PropTypeRequirement
asChildbooleanConditional
childrenReactNode | ReactElement<unknown, string | JSXElementConstructor<any>>Conditional

DropdownMenuSubTrigger

DropdownMenuSubTrigger props
PropTypeRequirement
size'lg' | 'md' | 'sm'Optional

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

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>>;