Item in Dropdown for React

When each option carries more than one piece of information, like a name and an email, or needs a picture to be recognized. For short labels such as Edit or Delete, plain text and an icon are enough. The menu's keyboard handling is the same either way.

Both parts have padding, and together they would double it. Removing it from the menu item and setting it on the Item lets one part own the spacing, and w-full makes the Item fill the row so the highlight covers it edge to edge.

ItemMedia keeps the avatar from shrinking and aligns it with the text; when the row has a description, it moves to the top of the row. The Avatar here is its default size, and AvatarFallback shows the username's first letter if the picture doesn't load.

size="sm" tightens the Item's gap and padding so more people fit before the menu scrolls. The example then sets p-2 on top of it to match the menu's own items. For an even tighter menu there's xs.

Put a width class on the menu content, w-72 here, and give the Item w-full. A fixed width keeps the menu from jumping as rows change; the title clamps to one line and the description to two if a value is longer.

Yes. The menu item carries the menuitem role and the keyboard handling, and the Item inside is only its content. Choosing a row closes the menu. To act on the choice: Set onClick on the item.