Microblog

# language-learning (2)# random (2)# ml/ai (2)# python (1)# tailwind (1)# nextjs (1)# writing (1)

7/2/2024

Making a Radix Dropdown the Same Width as Its Trigger

# tailwind

# nextjs

My website uses the shadcn Dropdown Menu (based on Radix's DropdownMenuPrimitive) to allow users to change the current website theme.

By default, the content of a dropdown component isn't the same width as its trigger. That bugged me, and so I spent a while looking for a solution. Finally, I found the answer in Radix's docs!

Put the below code in your CSS file (you can remove the @layer utilities wrapper if not using Tailwind):

@layer utilities {
  .dropdown-content-width-full {
    width: var(--radix-dropdown-menu-trigger-width);
    max-height: var(--radix-dropdown-menu-content-available-height);
  }
}

Now, change your <DropdownMenuComponent> to look like this:

<DropdownMenuContent align="end" className="dropdown-content-width-full">

Voila! The content and trigger are the same width. You're welcome.