Dropdown

Import

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSeparator, DropdownMenuSubTrigger, DropdownMenuSubContent } from "@sparrowengg/twigs-react";

Usage

Result

Loading...

Live EditorOpen in playground

<DropdownMenu>
  <DropdownMenuTrigger css={{
    padding: '8px',
    cursor: 'pointer',
    color: 'white',
    background: '#56B0BB',
    border: 'none',
    fontWeight: 'bold',
    borderRadius: '8px',
  }}>
    More Options
  </DropdownMenuTrigger>

  <DropdownMenuContent>
    <DropdownMenuItem>New Tab</DropdownMenuItem>

    <DropdownMenuSub>
      <DropdownMenuSubTrigger>
        More Tools
      </DropdownMenuSubTrigger>

      <DropdownMenuSubContent sideOffset={2} alignOffset={-5}>
        <DropdownMenuItem>Save Page As…</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Developer Tools</DropdownMenuItem>
      </DropdownMenuSubContent>
    </DropdownMenuSub>

  </DropdownMenuContent>
</DropdownMenu>

Props

DropdownMenu

Property	Description	Type	Default
defaultOpen	default open state of dropdown	boolean	false
open	controlled open state
onOpenChange	callback function when dropdown open status changed
size	Size of the Options	sm md	md

DropdownMenuContent

Property	Description	Type	Default
side	preferred side of the trigger to open the menu	top right bottom left	bottom
align	preferred alignment against the trigger	start center end	center
onOpenChange	callback function when dropdown open status changed