Link Overlay

Link overlay provides a semantic way to wrap elements (cards, blog post, articles, etc.) in a link.

When you need to link an entire component or card, it can be tempting to wrap it within <a href="..."> and think you're done. This is considered unsemantic and incorrect because the component or card could contain other clickable elements or links (tags, timestamps, buttons).

According to the specification, an <a> element’s content model specifically states that an <a> cannot contain any interactive descendants (button, anchors, input, etc).

The LinkOverlay component aims to solve this by overlaying one link on top of the component or card, and then elevating the remaining links on top of it.


import { LinkBox, LinkOverlay } from "@chakra-ui/react"


Wrap the container within a LinkBox and use the LinkOverlay as a child of it or around the title's content.

Editable Example

The LinkBox lifts any nested links to the top using z-index to ensure proper keyboard navigation between links.

Use the keyboard to test how focus ring moves within the article

Editable Example

Usage with Routing Library#

To add support for external libraries like Next.js' or gatsby Link, you can wrap them around the LinkOverlay or use the as prop (for reach and react router)

import NextLink from "next/link"
function Example() {
return (
<LinkBox as="article">
<NextLink href="#" passHref>
<LinkOverlay>Some blog post</LinkOverlay>
As a side note, using quotation marks around an attribute value is
required only if this value is not a valid identifier.
<a href="#">Some inner link</a>


One of the side-effects for this technique is that the content can't be "selectable" (i.e with a pointing device), however this seems to be pretty trivial compared to the benefits!


The LinkBox component composes the Box component.

The LinkOverlay component composes the chakra.a in addition to these props:

isExternalbooleanIf `true`, the link will open in new tab-