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...