Basic usage
Basic item
The entire item is clickable via data-delegate + data-delegate-to. Click anywhere on the item (not just the title link) to navigate.
Item title
Click anywhere on this item. It will navigate to the link in the heading.
Another item
This item also has a data-delegate-to and is fully clickable.
Item without link
This item has data-delegate but no data-delegate-to, so it does not become clickable.
Non-anchor targets
Button as target
The target element doesn't have to be an anchor. Here a <button> carries data-delegate-to — clicking anywhere on the item fires the button's click event.
Card with button target
Clicking anywhere on this item fires the button below.
Card with custom element target
Any element with data-delegate-to works as a target — here a <span> with a click listener.
Named links
Named link
When an item contains multiple links, use data-delegate="name" and data-delegate-to="name" to designate the primary link. The other links remain independently clickable.
Primary link
Clicking the item background navigates to the primary link.
Other link
Here the second link is the primary target.
Ignored elements
Ignored elements
Buttons and elements with data-delegate-ignore do not trigger navigation. Buttons and anchor tags are always ignored automatically.
Item title
The button below does not trigger navigation.
Item title
The element below has data-delegate-ignore and does not trigger navigation.
Item title
A secondary anchor tag is always ignored automatically — it navigates independently.
Dynamic items
Dynamically added items
Items added to the DOM after page load are handled automatically via MutationObserver. Click the button to add a new item and verify it becomes clickable.
Attribute changes
Adding or removing data-delegate or data-delegate-to on existing elements is detected automatically — no re-initialisation needed.
This item has no attributes yet
Use the buttons below to add and remove attributes dynamically.
onClick callback
Pass an onClick(item, link) function to run custom logic on navigation — useful for analytics or state updates. This instance uses custom attribute names to avoid interfering with the main one.
Callback item
Click this item — the onClick callback fires and logs below.
Destroy / re-init
clickDelegation() returns an instance with a destroy() method that removes all event listeners, disconnects the MutationObserver and removes is-clickable from all items.