Dropdown Menu

The Dropdown Menu component provides a floating menu anchored to a trigger element. It supports items, checkbox items, radio items, sub-menus, labels, separators, and keyboard shortcuts. Built with React Native's Modal and Pressable for a native experience.

Preview

Installation

npx novaui-cli add dropdown-menu

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
  DropdownMenuPortal,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuRadioGroup,
} from 'novaui-components'

Basic Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuGroup,
} from 'novaui-components'
import { Button } from 'novaui-components'

export function BasicDropdownMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Button variant="outline" label="Open Menu" />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

With Checkbox Items

import { useState } from 'react'

export function CheckboxDropdown() {
  const [statusBar, setStatusBar] = useState(true)
  const [activityBar, setActivityBar] = useState(true)
  const [panel, setPanel] = useState(false)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Button variant="outline" label="Appearance" />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem
          checked={statusBar}
          onPress={() => setStatusBar(!statusBar)}
        >
          Status Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={activityBar}
          onPress={() => setActivityBar(!activityBar)}
        >
          Activity Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={panel}
          onPress={() => setPanel(!panel)}
        >
          Panel
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

With Radio Items

import { useState } from 'react'

export function RadioDropdown() {
  const [position, setPosition] = useState('top')

  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <Button variant="outline" label="Position" />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuRadioGroup>
          <DropdownMenuRadioItem
            checked={position === 'top'}
            onPress={() => setPosition('top')}
          >
            Top
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem
            checked={position === 'bottom'}
            onPress={() => setPosition('bottom')}
          >
            Bottom
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem
            checked={position === 'right'}
            onPress={() => setPosition('right')}
          >
            Right
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

<DropdownMenu>
  <DropdownMenuTrigger>
    <Button variant="outline" label="File" />
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuItem>New File</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>More Tools</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem>Save All</DropdownMenuItem>
        <DropdownMenuItem>Revert File</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Quit</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Props API

DropdownMenu

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Trigger and content children

DropdownMenuTrigger

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as the child element instead of a Pressable

DropdownMenuContent

Extends React.ComponentPropsWithoutRef<typeof View>:

Prop	Type	Default	Description
`sideOffset`	`number`	`4`	Offset from the trigger element in pixels
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment relative to the trigger
`className`	`string`	-	Additional CSS classes

DropdownMenuItem

Extends React.ComponentPropsWithoutRef<typeof Pressable>:

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for icon alignment
`className`	`string`	-	Additional CSS classes

DropdownMenuCheckboxItem

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked

DropdownMenuRadioItem

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the radio item is selected

DropdownMenuLabel

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for alignment
`className`	`string`	-	Additional CSS classes

DropdownMenuSubTrigger

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Adds left padding for alignment

Best Practices

Group related items: Use DropdownMenuGroup and DropdownMenuSeparator to organize items logically
Add keyboard shortcuts: Show shortcut hints with DropdownMenuShortcut to aid discoverability
Use labels: Add DropdownMenuLabel to describe sections within the menu
Keep menus focused: Limit the number of items per menu; use sub-menus for overflow
Close on action: Items automatically close the menu on press

Context Menu - For right-click / long-press menus
Menubar - For app-level menu bars
Select - For single-value selection dropdowns

Continue reading

Getting Started Components Overview Popular: Dialog SEO Playbook