Dropdown - HapplyUI

A dropdown menu component with items, groups, sub-menus, and directional slide animations.

Installation

bunx @happlyui/cli@latest add dropdown

Dependencies

npm packages

@radix-ui/react-dropdown-menu
@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

happly-ui-utils
polymorphic

Usage

import * as Dropdown from "@/components/ui/dropdown"

<Dropdown.Root>
  <Dropdown.Trigger>Open</Dropdown.Trigger>
  <Dropdown.Content>
    <Dropdown.Item>Item</Dropdown.Item>
  </Dropdown.Content>
</Dropdown.Root>

Examples

Demo

Dropdown with user profile, menu items, and footer.

<Dropdown.Root>
  <Dropdown.Trigger asChild>
    <Button.Root>Open Dropdown</Button.Root>
  </Dropdown.Trigger>
  <Dropdown.Content align="start">
    <Dropdown.Group>
      <Dropdown.Item>
        <Dropdown.ItemIcon as={RiPulseLine} />
        Activity
      </Dropdown.Item>
    </Dropdown.Group>
  </Dropdown.Content>
</Dropdown.Root>

Dropdown with nested sub-menus for hierarchical navigation.

<Dropdown.MenuSub>
  <Dropdown.MenuSubTrigger>
    <Dropdown.ItemIcon as={RiFileList2Line} />
    Template Options
  </Dropdown.MenuSubTrigger>
  <Dropdown.MenuSubContent>
    <Dropdown.Item>Draft Post</Dropdown.Item>
    <Dropdown.Item>Publish Now</Dropdown.Item>
  </Dropdown.MenuSubContent>
</Dropdown.MenuSub>

API Reference

Dropdown.Root

The root dropdown container. Passes through Radix DropdownMenu.Root props.

Prop	Type	Default	Description

Dropdown.Trigger

The element that opens the dropdown.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element using Radix Slot

Dropdown.Content

The dropdown content panel with animations.

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	The preferred side to position the dropdown
`align`	`'start' \| 'center' \| 'end'`	`'center'`	The alignment relative to the trigger
`sideOffset`	`number`	`8`	Distance in pixels from the trigger

Dropdown.Item

A selectable dropdown menu item.

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Add left padding for alignment with icon items

Dropdown.ItemIcon

Icon displayed inside a dropdown item.

Prop	Type	Default	Description
`as`	`React.ElementType`	-	The icon component to render

Dropdown.Group

Groups related dropdown items.

Prop	Type	Default	Description

Dropdown.Label

A label for a group of dropdown items.

Prop	Type	Default	Description

Dropdown.MenuSub

Container for a sub-menu.

Prop	Type	Default	Description

Dropdown.MenuSubTrigger

The item that opens a sub-menu. Shows a right arrow indicator.

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

Dropdown.MenuSubContent

The sub-menu content panel.

Prop	Type	Default	Description