Menu

Dropdown menu opened via button. Supports typeahead and keyboard navigation.

Default

MenuButton extends the Button component.

Code Editor
<MenuWrapper>

  <MenuButton>Actions</MenuButton>

  <Menu width={200}>

    <MenuItem onClick={() => alert('One')}>One</MenuItem>

    <MenuItem onClick={() => alert('Two')}>Two</MenuItem>

    <MenuItem onClick={() => alert('Three')}>Three</MenuItem>

    <MenuItem onClick={() => alert('Delete')} type="error">Delete</MenuItem>

  </Menu>

</MenuWrapper>

Disabled Items

Code Editor
<MenuWrapper>

  <MenuButton>Actions</MenuButton>

  <Menu width={200}>

    <MenuItem disabled>One</MenuItem>

    <MenuItem>Two</MenuItem>

    <MenuItem disabled>Three</MenuItem>

    <MenuItem>Four</MenuItem>

  </Menu>

</MenuWrapper>

Link Items

MenuLink extends the Link component.

Code Editor
<MenuWrapper>

  <MenuButton>Links</MenuButton>

  <Menu width={200}>

    <MenuLink href="/design/menu#custom-trigger">One</MenuLink>

    <MenuLink href="#">Two</MenuLink>

    <MenuLink href="#">Three</MenuLink>

  </Menu>

</MenuWrapper>

Custom Trigger

The trigger is still wrapped by an unstyled button.

Code Editor
<MenuWrapper>

  <MenuButton variant="unstyled">

    <Avatar size={30} src="https://thekevinwang.com/image/kevin.webp" />

  </MenuButton>

  <Menu width={200}>

    <MenuItem>One</MenuItem>

    <MenuItem>Two</MenuItem>

    <MenuItem>Three</MenuItem>

  </Menu>

</MenuWrapper>

Prefix and Suffix

Code Editor
<Container row>

  <Container>

    <MenuWrapper>

      <MenuButton size="small" shape="square" type="secondary">

        <MoreHorizontal />

      </MenuButton>

      <Menu divide>

        <MenuItem prefix={<AlignLeft />}>Left</MenuItem>

        <MenuItem prefix={<AlignCenter />}>Center</MenuItem>

        <MenuItem prefix={<AlignRight />}>Right</MenuItem>

      </Menu>

    </MenuWrapper>

  </Container>



  <Container>

    <MenuWrapper>

      <MenuButton size="small" shape="square" type="secondary">

        <MoreHorizontal />

      </MenuButton>

      <Menu divide>

        <MenuItem suffix={<AlignLeft />}>Left</MenuItem>

        <MenuItem suffix={<AlignCenter />}>Center</MenuItem>

        <MenuItem suffix={<AlignRight />}>Right</MenuItem>

      </Menu>

    </MenuWrapper>

  </Container>

</Container>

To be continued...