Link Overlay

Link overlay is a semantic component used to wrap elements (cards, blog post, articles, etc.) in a link.

Import#

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

Usage#

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.

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

Nested Links#

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

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'>
      <h2>
        <LinkOverlay as={NextLink} href="#">Some blog post</LinkOverlay>
      </h2>
      <p>
        As a side note, using quotation marks around an attribute value is
        required only if this value is not a valid identifier.
      </p>
      <a href='#'>Some inner link</a>
    </LinkBox>
  )
}

Caveat#

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!

Edit this page on GitHub