Headless UI の Menu.Item で next/link を使えるようにする

Headless UI のメニュー(ドロップダウン)で、Menu.Item の子要素に button や a ではなく Next.js の Link (next/link) を使用する場合、ちょっと工夫が必要だったのでメモ。

正しく動かない例

この場合、メニューが開いている時に ↑↓キー でフォーカスを合わせて Enter を押しても、メニューが閉じるだけでリンク先に遷移しない。

// Menu.Item 以外省略
<Menu.Item>
  {({ active }) => (
    <Link href="/neko">
      <a className={`${active ? "bg-gray-100 text-black" : "text-gray-700"}`}>
        リンク
      </a>
    </Link>
  )}
</Menu.Item>

正しく動く例

NextLink コンポーネントを作成して、残りの props が a に直接渡るようにすると、きちんと動作した。

const NextLink = ({ href, children, ...rest }) => (
  <Link href={href}>
    <a {...rest}>{children}</a>
  </Link>
)

// Menu.Item 以外の部分は省略
<Menu.Item>
  {({ active }) => (
    <NextLink
      href="/neko"
      className={`${active ? "bg-gray-100 text-black" : "text-gray-700"}`}
    >
      リンク
    </NextLink>
  )}
</Menu.Item>

おわりに

Headless UI ばり便利〜