Menu

import

{

Button

,

Card

,

Icon

,

Menu

,

MenuDivider

,

MenuDropdown

,

MenuItem

,

Text

,

}

from

'@platform-blocks/react-ui-library'

;

export

function

Demo

(

)

{

return

(

<Menu

>

<Button

size

=

"sm"

variant

=

"outline"

>

Open

menu

</Button

>

<MenuDropdown

>

<MenuItem

startSection

=

{

<Icon

name

=

"user"

size

=

"sm"

/>

}

>

Profile

</MenuItem

>

<MenuItem

startSection

=

{

<Icon

name

=

"settings"

size

=

"sm"

/>

}

>

Settings

</MenuItem

>

<MenuItem

startSection

=

{

<Icon

name

=

"info"

size

=

"sm"

/>

}

>

Help

&

Support

</MenuItem

>

<MenuDivider

/>

<MenuItem

startSection

=

{

<Icon

name

=

"arrow-left"

size

=

"sm"

/>

}

>

Logout

</MenuItem

>

</MenuDropdown

>

</Menu

>

)

;

}

import

{

Block

,

Card

,

Icon

,

Menu

,

MenuDivider

,

MenuDropdown

,

MenuItem

,

Text

,

}

from

'@platform-blocks/react-ui-library'

;

export

function

Demo

(

)

{

return

(

<Menu

trigger

=

"contextmenu"

>

<Card

p

=

"lg"

variant

=

"outline"

style

=

{

{

          borderStyle

:

'dashed'

,

          cursor

:

'context-menu'

,

          alignItems

:

'center'

,

          justifyContent

:

'center'

,

          minHeight

:

140

,

}

}

>

<Block

align

=

"center"

>

<Icon

name

=

"star"

size

=

"lg"

color

=

"gold"

/>

<Text

size

=

"sm"

color

=

"secondary"

>

Right

-

click or long

-

press

this

area

</Text

>

</Block

>

</Card

>

<MenuDropdown

>

<MenuItem

startSection

=

{

<Icon

name

=

"copy"

size

=

"sm"

/>

}

>

Copy

link

</MenuItem

>

<MenuItem

startSection

=

{

<Icon

name

=

"edit"

size

=

"sm"

/>

}

>

Rename

</MenuItem

>

<MenuItem

startSection

=

{

<Icon

name

=

"share"

size

=

"sm"

/>

}

>

Share

</MenuItem

>

<MenuDivider

/>

<MenuItem

startSection

=

{

<Icon

name

=

"trash"

size

=

"sm"

/>

}

>

Delete

</MenuItem

>

</MenuDropdown

>

</Menu

>

)

;

}

import

{

Button

,

Card

,

Menu

,

MenuDropdown

,

MenuItem

,

Row

,

Text

}

from

'@platform-blocks/react-ui-library'

;

const

POSITIONS

=

[

{

label

:

'Bottom start'

,

position

:

'bottom-start'

}

,

{

label

:

'Bottom'

,

position

:

'bottom'

}

,

{

label

:

'Bottom end'

,

position

:

'bottom-end'

}

,

{

label

:

'Top start'

,

position

:

'top-start'

}

,

{

label

:

'Top'

,

position

:

'top'

}

,

{

label

:

'Top end'

,

position

:

'top-end'

}

,

]

as

const

;

export

function

Demo

(

)

{

return

(

<Row

gap

=

"md"

justify

=

"center"

wrap

=

"wrap"

>

{

POSITIONS

.

map

(

(

{

label

,

position

}

)

=>

(

<Menu

key

=

{

position

}

position

=

{

position

}

>

<Button

size

=

"sm"

variant

=

"outline"

>

{

label

}

</Button

>

<MenuDropdown

>

<MenuItem

>

Duplicate

</MenuItem

>

<MenuItem

>

Archive

</MenuItem

>

</MenuDropdown

>

</Menu

>

)

)

}

</Row

>

)

;

}

import

{

Button

,

Icon

,

Menu

,

MenuDivider

,

MenuDropdown

,

MenuItem

,

MenuLabel

,

MenuSub

,

}

from

'@platform-blocks/react-ui-library'

;

export

function

Demo

(

)

{

return

(

<Menu

w

=

{

220

}

>

<Button

size

=

"sm"

variant

=

"outline"

>

Actions

</Button

>

<MenuDropdown

>

<MenuLabel

>

Document

</MenuLabel

>

<MenuItem

startSection

=

{

<Icon

name

=

"edit"

size

=

"sm"

/>

}

>

Rename

</MenuItem

>

{

/* Flyout submenu — opens to the side on hover (web) or tap */

}

<MenuSub

label

=

"Share"

startSection

=

{

<Icon

name

=

"share"

size

=

"sm"

/>

}

>

<MenuItem

startSection

=

{

<Icon

name

=

"link"

size

=

"sm"

/>

}

>

Copy

link

</MenuItem

>

<MenuItem

startSection

=

{

<Icon

name

=

"mail"

size

=

"sm"

/>

}

>

Email

</MenuItem

>

{

/* Submenus nest arbitrarily deep */

}

<MenuSub

label

=

"Social"

>

<MenuItem

>

Twitter

/

X

</MenuItem

>

<MenuItem

>

LinkedIn

</MenuItem

>

<MenuItem

>

Reddit

</MenuItem

>

</MenuSub

>

</MenuSub

>

<MenuSub

label

=

"Move to"

startSection

=

{

<Icon

name

=

"folder"

size

=

"sm"

/>

}

>

<MenuItem

>

Projects

</MenuItem

>

<MenuItem

>

Archive

</MenuItem

>

<MenuItem

>

Trash

</MenuItem

>

</MenuSub

>

<MenuDivider

/>

<MenuItem

color

=

"danger"

startSection

=

{

<Icon

name

=

"trash"

size

=

"sm"

/>

}

>

Delete

</MenuItem

>

</MenuDropdown

>

</Menu

>

)

;

}