Dropdown Menu

A menu that can be triggered by a button.
Favorite
Add
Edit
Delete
Properties
No properties to configure

Installation

Usage

Example
Source Code
"use client";

import React from "react";
import { DropdownMenu } from "@/ui/components/DropdownMenu";
import { FeatherStar } from "@subframe/core";
import { FeatherPlus } from "@subframe/core";
import { FeatherEdit2 } from "@subframe/core";
import { FeatherTrash } from "@subframe/core";
import * as SubframeCore from "@subframe/core";

function DropdownMenuExample() {
  return (
    <SubframeCore.DropdownMenu.Root>
      <SubframeCore.DropdownMenu.Trigger asChild={true}>
        <span className="text-body font-body text-default-font">
          Dropdown Menu Trigger
        </span>
      </SubframeCore.DropdownMenu.Trigger>
      <SubframeCore.DropdownMenu.Portal>
        <SubframeCore.DropdownMenu.Content
          side="bottom"
          align="start"
          sideOffset={4}
          asChild={true}
        >
          <DropdownMenu>
            <DropdownMenu.DropdownItem icon={<FeatherStar />}>
              Favorite
            </DropdownMenu.DropdownItem>
            <DropdownMenu.DropdownItem icon={<FeatherPlus />}>
              Add
            </DropdownMenu.DropdownItem>
            <DropdownMenu.DropdownItem icon={<FeatherEdit2 />}>
              Edit
            </DropdownMenu.DropdownItem>
            <DropdownMenu.DropdownItem icon={<FeatherTrash />}>
              Delete
            </DropdownMenu.DropdownItem>
          </DropdownMenu>
        </SubframeCore.DropdownMenu.Content>
      </SubframeCore.DropdownMenu.Portal>
    </SubframeCore.DropdownMenu.Root>
  );
}

export default DropdownMenuExample;

Props

Dropdown Menu Props
Dropdown Divider Props
Dropdown Item Props
Prop
Type
Default value
Notes
children
React.ReactNode

Examples

Basics

Wrap your content with SubframeCore.DropdownMenu to show the dropdown menu. It has the same API as Radix UI's DropdownMenu component.

Offset

Use sideOffset to change the distance between the trigger and the dropdown menu.

Positioning

Use side and align props to change the position of the dropdown menu.