Skip to main content

DyteMenu

A menu component.

LIVE EDITOR
<Row style={{ padding: '52px 0 0 0' }}>
  <DyteMenu placement="top">
    <DyteButton slot="trigger">Top Menu</DyteButton>
    <DyteMenuList>
      <DyteMenuItem onClick={() => alert('You clicked: alert()')}>
        alert()
      </DyteMenuItem>
    </DyteMenuList>
  </DyteMenu>

  {/* This menu will be placed at top due to less space */}
  <DyteMenu placement="bottom">
    <DyteButton slot="trigger">Bottom Menu</DyteButton>
    <DyteMenuList>
      <DyteMenuItem onClick={() => alert('You clicked: alert()')}>
        alert()
      </DyteMenuItem>
    </DyteMenuList>
  </DyteMenu>
</Row>
Preview
Top Menualert()Bottom Menualert()

Props​

iconPack

Icon pack

Default
defaultIconPack

offset

Offset in px

Default
10
Type
number

placement

Placement of menu

Default
'bottom-end'
Type
"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"

size

Size

Type
"lg" | "md" | "sm" | "xl"

t

Language

Default
useLanguage()