Attribute-based Smart Link

Turns any HTML element into a clickable, keyboard-accessible link using custom data attributes for URL, prefix, suffix, and target. Great for no-code link customization and accessibility.

Step #1
Copy below <script> and paste into the <head> of your page
<!-- [Mircocodes by Kookies] HTML Embed Via Component Props -->
<script defer src="https://cdn.jsdelivr.net/gh/kookiesagency/attribute-based-smart-link@v1.0.0/attribute-based-smart-link.min.js"></script>
Copy Script
Step #2
HTML Structure
<!-- Basic: turns div into a link to /about-us -->
<div data-mc-url="about-us">
  About Us
</div>

<!-- Add a prefix (e.g. /company/about-us) -->
<div data-mc-url="about-us" data-mc-url-prefix="/company">
  About Our Company
</div>

<!-- Add a suffix (e.g. /about-us?ref=home) -->
<div data-mc-url="about-us" data-mc-url-suffix="?ref=home">
  About Us (with ref)
</div>

<!-- Open absolute URL in new tab -->
<div data-mc-url="https://example.com" data-mc-target="_blank">
  Visit Example.com
</div>

<!-- Combine prefix, suffix, and open in new tab -->
<span data-mc-url="team" data-mc-url-prefix="/company" data-mc-url-suffix="#leadership" data-mc-target="_blank">
  Meet Our Leaders
</span>

<!-- Use on button -->
<button data-mc-url="contact">
  Contact Us
</button>
Step #3
How to Use
Apply attributes to elements on the page
1
Main URL

Defines the primary destination for the link. This can be a relative path (e.g., ⁠about) or an absolute URL (e.g., ⁠https://example.com). This attribute is required for the Smart Data Link to function.

Where: Any clickable element (div, span, button, etc.)

data-mc-url
=
eg: https://example.com

Note: If you use an absolute URL (starts with ⁠http:// or ⁠https://), the prefix will be ignored.

Optional
URL Prefix - Optional

Adds a path segment before the main URL. This is especially useful for CMS-driven sites, where you fetch slugs (like blog post or product slugs) from the CMS and need to prepend the collection or folder name (e.g., ⁠/blog, ⁠/products). The script automatically handles slashes for you.

data-mc-url-prefix
=
eg: collection

Note: If the prefix doesn’t start with a ⁠/, it will be added for you. Trailing slashes are removed automatically.

Optional
URL Suffix

Appends text after the main URL, such as query parameters or hash fragments. Useful for tracking, filtering, or navigating to specific sections.

data-mc-url-suffix
=
eg: ?source=home

Note: You can combine suffixes with prefixes and the main URL for advanced navigation.

Optional
Link Target

Determines where the link opens. Use ⁠_blank to open in a new tab/window, or ⁠_self to open in the current tab.

Default: _self

data-mc-target
=
eg: _blank

Note: If omitted, links open in the same tab.

Working examples

See this solution working live in this Webflow project.

Example 1 Create custom button with div

Frequently Asked Questions

Everything you need to know about this attributes solution.

What is this solution for?

It lets you turn any HTML element into a fully accessible, clickable link using only data attributes—no anchor tags or JavaScript coding needed.

Why do we need this solution? What problem is it solving?

This solution makes it easy to turn any HTML element into a fully accessible, keyboard-friendly link using only data attributes. It’s especially useful for no-code and CMS-driven sites where you want to dynamically create links.

In Webflow certain elements (such as tabs or buttons) don’t natively allow you to add links or customize navigation behavior. For example, Webflow tabs use anchor tags for tab controls, so you can’t add a button or link inside the tab. This solution lets you add navigation to any element—using simple data attributes—so you can create links, open pages, or trigger navigation anywhere Webflow restricts link functionality. It’s perfect for adding dynamic links anywhere you need a link but can’t use an anchor tag.

Does it work with buttons, spans, images, etc.?

Yes, any element with ⁠data-mc-url will function as a link.

 Is it accessible?

Yes, it adds ⁠role="link" and ⁠tabindex="0", making it keyboard-navigable.

Can I use absolute URLs?

Yes, if ⁠data-mc-url starts with ⁠http:// or ⁠https://, prefix is ignored.

How do I open links in a new tab?

Add ⁠data-mc-target="_blank".

Can I add query strings or fragments?

Yes, use ⁠data-mc-url-suffix (e.g., ⁠?ref=home or ⁠#section).

Can I style these elements?

Yes, style them as you would any element. The script adds a pointer cursor by default.

Want More Resources?

We make cloneables and other useful resources for you.