Select Link

‹ Back

Select links convert select elements in to linkable objects.

All you need to do to make this happen is add data-select-link on your select element, then use the URLs as the value for each option.

<select data-select-link class="form--medium">
  <option value="">Select a page...</option>
  <option value="http://google.com.au">Google</option>
  <option value="http://katalyst.com.au">Visit the Katalyst Website</option>
</select>

If the select contains a link that matches the URL of the page the user is currently on, it will automatically make that one selected on page load. This is helpful if using it as a navigation tool:

<select data-select-link class="form--medium">
  <option value="">Select a page...</option>
  <option value="http://google.com.au">Google</option>
  <option value="http://google.com.au">Google</option>
  <option value="http://google.com.au">Google</option>
  <option value="/styleguide/select_link">/styleguide/select_link</option>
  <option value="http://google.com.au">Google</option>
</select>