Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Menu] Allow links as MenuItems

See original GitHub issue

Description

Currently, there is no clear way to render anchors as menu items. Existing MenuItem strongly assumes that it’s going to render a button element: https://github.com/chakra-ui/chakra-ui/blob/910a701f9f3b16157f287479a3df64a2ea84090b/packages/menu/src/menu.tsx#L259

Problem Statement/Justification

This is a valid use case, implemented as an example here: https://www.w3.org/TR/wai-aria-practices-1.2/examples/menu-button/menu-button-links.html

Proposed Solution or API

Either provide an option on the MenuItem (could be indirect) or create a new MenuItemLink component. An example in the docs of how to use this would be appreciated as well.

Alternatives

No response

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Reactions:8
Comments:14 (7 by maintainers)

Top GitHub Comments

16reactions

Andaristcommented, Dec 30, 2021

I think this works OK:

<Menu>
    <MenuButton>Working menu</MenuButton>
    <MenuList>
        <NextLink href="/" passHref>
            <MenuItem as="a">Home</MenuItem>
        </NextLink>
        <NextLink href="/about" passHref>
            <MenuItem as="a">About</MenuItem>
        </NextLink>
        <NextLink href="/profile" passHref>
            <MenuItem as="a">Profile</MenuItem>
        </NextLink>
    </MenuList>
</Menu>

Can be tested here: https://codesandbox.io/s/nervous-elbakyan-2mcxs?file=/pages/_app.js

I wouldn’t call this intuitive though.

4reactions

Andaristcommented, Apr 16, 2022

bump for the stale bot