Dropdown Menu

A menu that can be triggered by a button.
Favorite
Add
Edit
Delete
Properties
No properties to configure
Example
Source Code
Installation
"use client";

import React from "react";
import { DropdownMenu } from "@/subframe/components/DropdownMenu";

function DropdownMenuExample() {
  return (
    <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>
  );
}

export default DropdownMenuExample;

Props

Dropdown Menu
Dropdown Item
Prop
Type
Default
Additional info
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.