Drop Menu

DropMenu

<DemoDropMenu> <PaperMenu sticky={{ width: '300px' }} > <DropMenuItem> Assign to task </DropMenuItem> <DropMenuItem> Assign to new category </DropMenuItem> <DropMenuItem> Remove from index </DropMenuItem> </PaperMenu> </DemoDropMenu>

Menu items with icons

<DemoDropMenu> <PaperMenu sticky={{ width: '300px' }} > <DropMenuItem icon="info_outline"> Assign to task </DropMenuItem> <DropMenuItem icon="add"> Assign to new category </DropMenuItem> <DropMenuItem icon="remove_circle"> Remove from index </DropMenuItem> </PaperMenu> </DemoDropMenu>

DropMenu with sub items

<DemoDropMenu> <PaperMenu sticky={{ width: '300px' }} > <DropMenuItem> Assign to category </DropMenuItem> <DropMenuItem isSubItem={true}> Engineers </DropMenuItem> <DropMenuItem isSubItem={true}> Designers </DropMenuItem> <DropMenuItem isHighlighted={true} isSubItem={true} > Photographers </DropMenuItem> </PaperMenu> </DemoDropMenu>

Truncation

<DemoDropMenu> <PaperMenu sticky={{ width: '300px' }} > <DropMenuItem icon="chevron_left"> A really long title that should be truncated </DropMenuItem> <DropMenuItem isSubItem={true}> A really long title that should be truncated </DropMenuItem> </PaperMenu> </DemoDropMenu>

DropMenu with link items

<DemoDropMenu> <PaperMenu sticky={{ width: '300px' }} > <DropMenuItem> This is not a link </DropMenuItem> <DropMenuItem component="a" href="http://kalohq.com" target="_blank" title="As a link" > But this is! 😮🎉 </DropMenuItem> </PaperMenu> </DemoDropMenu>