104Get started
HextaUI

Dropdown menu: Scrolling

When there isn’t room for every item, the menu scrolls inside the viewport and the highlighted item scrolls into view.

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuScrolling() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        40 documents
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        {Array.from({ length: 40 }, (_, index) => (
          <DropdownMenuItem key={index}>Document {index + 1}</DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Add this example

This adds the example as components/examples/dropdown-menu/scrolling.tsx, together with the Dropdown menu component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/dropdown-menu-scrolling.json

To add only the component, follow the Dropdown menu installation.

Props in this example

The Dropdown menu props this example sets, from the API reference.

DropdownMenuTrigger

PropTypeDefault
render
ReactElement | (props, state) => ReactElement<button>

Every prop is in the Dropdown menu API reference.

More Dropdown menu examples

See them all, with keyboard support and accessibility notes, on the Dropdown menu page.

Related components