# Combobox Options as Links

**URL:** <https://forum.finsweet.com/t/combobox-options-as-links/5742>\
**Category:** Attributes\
**Tags:** combobox, attributes-v2\
**Created:** [August 5, 2025, 1:21pm UTC](https://forum.finsweet.com/t/combobox-options-as-links/5742 "2025-08-05T13:21:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nick5](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/nick5/32/4909_2.png) [@nick5](https://forum.finsweet.com/u/nick5)\
**Post date:** [August 5, 2025, 1:21pm UTC](https://forum.finsweet.com/t/combobox-options-as-links/5742/1 "2025-08-05T13:21:38Z")

</div>

Hello!

I’m using a combobox to populate a list of items (Blog Posts) from a CMS Collection, and I’d like to allow a user to click on the item in the combobox to navigate directly to the page for that item (Blog Post).

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/9/9865355f224bfb2f6c17f7c30037e0f0bf6256b5.png)

Staging URL: [Blog](https://insuraviews-v2.webflow.io/blog)

Read Only Link: [Webflow - Insuraviews V2](https://preview.webflow.com/preview/insuraviews-v2?utm_medium=preview_link&utm_source=designer&utm_content=insuraviews-v2&preview=d06afc1b2522fd4ccf20dbf1a84e4c3e&pageId=6887c17c5612fe78b8ad8dee&locale=en&workflow=preview)

Thanks in advance for the help!

---

<div class="post-metadata">

**Author:** ![Support-Finn](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-finn/32/5169_2.png) [@Support-Finn](https://forum.finsweet.com/u/Support-Finn)\
**Post date:** [August 6, 2025, 11:45am UTC](https://forum.finsweet.com/t/combobox-options-as-links/5742/2 "2025-08-06T11:45:10Z")

</div>

Hi @nick5,

We’d recommend using custom JavaScript to make your combo box options clickable for navigation to blog posts.

To implement this, you’ll need to:

1. Add a dynamic attribute `data-href` with the post slug as its value to each of the elements with `fs-list-element="select-value"`.

2. Add JavaScript to update the combo box options with the correct `href`, and redirect the user when an option is selected:

```html
<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'combobox',
    (dropdownElements) => {
      console.log('Combobox Loaded!');

      const dynamicLinks = Array.from(
        document.querySelectorAll('[fs-list-element="select-value"]')
      );

      const applyHrefs = () => {
        const comboOptions = Array.from(
          document.querySelectorAll('[fs-combobox-element="option-template"]')
        );

        dynamicLinks.forEach((link) => {
          const linkText = link.textContent.trim();
          const linkHref = link.getAttribute('data-href');

          const matchingOption = comboOptions.find((option) => {
            const optionText = option.querySelector('div:last-child')?.textContent.trim();
            return optionText === linkText;
          });

          if (matchingOption && linkHref) {
            matchingOption.setAttribute('href', `/post/${linkHref}`);
          }
        });
      };

      applyHrefs();

      document.querySelectorAll('[fs-combobox-element="dropdown"]').forEach((dropdownEl) => {
        const listEl = dropdownEl.querySelector('.fs-combobox_list');
        if (listEl) {
          listEl.addEventListener('click', function (event) {
            const option = event.target.closest('[fs-combobox-element="option-template"]');
            if (option) {
              event.preventDefault();
              const targetHref = option.getAttribute('href');
              if (targetHref) {
                window.location.href = targetHref;
              }
            }
          });
        }
      });

      const observer = new MutationObserver(() => {
        applyHrefs();
      });

      document.querySelectorAll('.fs-combobox_list').forEach((listEl) => {
        observer.observe(listEl, { childList: true, subtree: true });
      });
    },
  ]);
</script>

```

This solution works by redirecting users when they select an option from your combo box. Since this requires custom code implementation, @Support-Luis or @Support-Pedro can help you implement this based on your specific setup.

---

<div class="post-metadata">

**Author:** ![nick5](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/nick5/32/4909_2.png) [@nick5](https://forum.finsweet.com/u/nick5)\
**Post date:** [August 6, 2025, 3:53pm UTC](https://forum.finsweet.com/t/combobox-options-as-links/5742/3 "2025-08-06T15:53:34Z")

</div>

That worked perfectly - thank you @Support-Finn ! 💪