How can I change width of the nextui dropdown

211 views Asked by At

I cannot find any way to change the width of the nextui dropdown I tried using classNames prop like this but it does not work ` <DropdownMenu classNames={{ base: "max-w-[100px]" }} disallowEmptySelection selectionMode="single" selectedKeys={selectedLanguage.code} onSelectionChange={(lan: any) => { router.replace(path, { locale: lan.anchorKey }); }}

`

I tried same For component but it just shifts the layout

1

There are 1 answers

0
Navin Jethwani On

The classes added to DropDownMenu are the classes we want to add to the List of the Menu. If you want to increase / decrease the width of the menu, add the classes in the DropDown element.

Also, There is "min-w-[200px]" class added by default on the Menu. You can add something like className="min-w-0 w-fit" in DropDown element which will remove the minimum width set and resize as needed.