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.
<script defer src="https://cdn.jsdelivr.net/gh/kookiesagency/attribute-based-smart-link@v1.0.0/attribute-based-smart-link.min.js"></script>
<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>
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.)
Note: If you use an absolute URL (starts with http:// or https://), the prefix will be ignored.
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.
Note: If the prefix doesn’t start with a /, it will be added for you. Trailing slashes are removed automatically.
Appends text after the main URL, such as query parameters or hash fragments. Useful for tracking, filtering, or navigating to specific sections.
Note: You can combine suffixes with prefixes and the main URL for advanced navigation.
Determines where the link opens. Use _blank to open in a new tab/window, or _self to open in the current tab.
Default: _self
Note: If omitted, links open in the same tab.
See this solution working live in this Webflow project.
Example 1 Create custom button with div
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.
