--- title: Legible click breadcrumb selectors for JavaScript date: "2026-08-20" publisher: Honeybadger url: "https://www.honeybadger.io/changelog/clickable-breadcrumb-selectors/" --- By default, Honeybadger's `ui.click` breadcrumbs build a CSS selector from each element's tag, ID, and classes. In apps built with utility-CSS frameworks like Tailwind, this produces a wall of unreadable text: ```jsx body > div#root > main > div.flex.min-h-screen.flex-col.font-sans.antialiased > ... ``` Now you can tag clickable elements you care about with a `data-hb-name` attribute and get a legible, meaningful selector instead — like `deal-card > h3.text-left.font-semibold`. **How it works:** Add `data-hb-name` to any element: ```jsx

Acme Corp

``` Clicking the heading now records the selector `deal-card > h3.text-left.font-semibold` instead of the full ancestor chain from ``. When a clicked element (or any of its ancestors) carries the `hb` attribute, the attribute replaces that element's selector segment, and the nearest named ancestor anchors the selector, dropping everything above it. Already have identifying attributes? Reuse them via breadcrumbsSelectorAttributes. ```jsx Honeybadger.configure({ breadcrumbsSelectorAttributes: ["data-hb-n] }); ``` Just remember: the first named attribute in a list wins. You can set it to `[]` instead to disable the behavior entirely. Read more about configuring your selectors in the [JavaScript documentation library.](https://docs.honeybadger.io/lib/javascript/reference/configuration/) --- ## Try Honeybadger for FREE Intelligent logging, error tracking, and Just Enough APM™ in one dev-friendly platform. Find and fix problems before users notice. [Start free trial](https://app.honeybadger.io/users/sign_up) [See plans and pricing](https://www.honeybadger.io/plans/)