Chakra-UI

I♥️Components

Link Overlay

|

Chakra Docs

|

⦾ The LinkOverlay component in Chakra UI serves a specific, yet essential role: it provides a semantic way to wrap complex interactive elements such as cards, blog posts, articles, etc., in a link.

The necessity of LinkOverlay arises from the fact that wrapping an entire interactive component or card with an HTML <a> element is not considered semantic. The HTML specification clearly states that an <a> element cannot contain interactive descendants such as buttons, anchors, or input fields.

LinkOverlay tackles this problem by overlaying a single link on top of the interactive element or card, and elevating any remaining links on top of this overlay. This ensures proper semantics and correct handling of nested interactive elements.

LinkOverlay is usually imported alongside the LinkBox component. These two work together to improve link accessibility and user experience. Here is a further explanation of the two components:

  • LinkBox: a utility component that's used to create a larger clickable area for one or more nested links. It doesn't provide any styles of its own. The primary role of LinkBox is to enhance accessibility and UX by improving the link interaction area. To create a larger clickable area, you would wrap the LinkBox around a block of content containing a LinkOverlay component. However, please note that it's important to have only one interactive child (an element with click or key press interaction) within a LinkBox.
  • LinkOverlay: a component that's primarily used in conjunction with LinkBox to create larger, more accessible link areas. It is used to wrap the primary link content within a LinkBox. The LinkOverlay component's main function is to wrap the content that should act as the main link within a LinkBox. When the user clicks anywhere within the LinkBox, they'll be directed to the URL of the LinkOverlay component.

These components can be imported as follows:

Examples

Basic Usage

⦾ consider a blog post card with a title, published date, and a brief summary. Here's how to use LinkBox and LinkOverlay. In this example, the entire blog post card is semantically linked, with the title being the primary clickable link.

Exploring AI: The Roadmap Ahead

Uncover what the future holds for AI and learn about the latest advancements in the field.

Code

Nested Links

⦾ LinkBox elevates any nested links to ensure proper keyboard navigation. Consider the following modification to the previous example, with an additional nested link. According to the HTML specification, a hyperlink (<a> tag) should not contain any other interactive elements, such as buttons, other links, or inputs.

In the code for the example below, you can see a nested interactive element (a link represented by Box as='a') inside a LinkBox, which itself contains a LinkOverlay serving as the main link. Chakra UI uses CSS stacking context (with z-index) to manage this complex interaction scenario properly. In essence, it "lifts" the nested link to the top, so it's independently clickable from the LinkOverlay.

This allows the user to interact with each link separately – when you hover over or focus on the main linked area (covered by LinkOverlay), you get the URL specified in LinkOverlay. But when you hover over or focus on the inner link, you interact with the URL specified in the inner link.

This ability to independently interact with each link despite the nesting is the interesting part of this example. It maintains proper HTML semantics while enhancing user experience, especially for keyboard users who rely on focus states for navigation.

Exploring AI: The Roadmap Ahead

Uncover what the future holds for AI and learn about the latest advancements in the field.

Read More

Code

Using with Routing

⦾ LinkOverlay is also compatible with external routing libraries such as React Router, Next.js and Gatsby. You can either wrap the LinkOverlay component around the external link or use the as prop.

Code

One Drawback

⦾ There's a particular issue associated with using the LinkOverlay technique. Specifically, the content inside a LinkOverlay is not selectable using a pointing device such as a mouse or trackpad. Essentially, you cannot highlight the text or elements within the LinkOverlay like you typically would with regular text. Despite this limitation, it's considered a relatively minor issue when weighed against the advantages provided by LinkOverlay. These include semantic correctness, improved accessibility, and the ability to create complex, interactive link structures.

Did you know?

Creative Idea No. 1

Overlay with Image and Caption: You might not think about using LinkOverlay with an image and caption, but this can be a great way to create linked images for blog posts, articles, or portfolio pieces. This allows the whole card, including image and caption, to act as a link. Here, the entire figure, including the image and caption, behaves as a single link, providing an intuitive navigation experience for the user. This usage also has accessibility benefits, as the image and its related text are semantically grouped together as a single navigable element.
Paris
I love Paris.

Code

Creative Idea No. 2

Overlay with Complex Layout: LinkOverlay is not limited to just text or simple layouts. It can be used in combination with complex layout components to create interesting interactive elements. This shows how LinkOverlay can be used with more complex layout components like Grid. Each box within the grid can contain separate links, but visually, they all belong to one unit. This can be useful in scenarios like dashboard UIs, where different parts of a larger component might need to link to different resources or sections of the application.
Link to somewhere interesting
Link to somewhere else interesting

Code

Creative Idea No. 3

Overlay with List Elements: LinkOverlay can be paired with list elements to create interesting navigation menus or linked list items. Using LinkOverlay with LinkBox in a list structure, as opposed to using Link directly, is beneficial when you want the entire list item, including any padding or margin, to be clickable, rather than just the text or icon inside it. This can enhance usability, especially on mobile devices, where precise clicking or tapping can be more challenging.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.