Skip to main content

Select Navigation (External) v1.2.0

Allow user to choose an item from a select menu and navigate to a corresponding page.

Default Setup 

<div class="select-external">

    <nav aria-label="Jump Menu" class="select-external__nav">

      <label class="select-external__label">My favorite component is:</label>

      <select class="select-external__select">
        <option value="https://radancy.dev/component-library/accordion/">Accordion</option>
        <option value="https://radancy.dev/component-library/animation-toggle/">Animation Toggle</option>
        <option value="https://radancy.dev/component-library/disclosure/">Disclosure</option>
        <option value="https://radancy.dev/component-library/hero-banner/">Hero Banner</option>
        <option value="https://radancy.dev/component-library/tablist/">TabList</option>
      </select>

      <button class="select-external__btn">Go</button>

    </nav>

  </div>
/*!

  Radancy Component Library: Select Navigation (External)

  Contributor(s):
  Michael "Spell" Spellacy

  Dependencies: Sass

*/

.select-external {
  
  &__nav {
  background-color: #EEE;
  border-radius: .5em;
  display: grid;
  gap: .5em;
  max-width: calc(420rem / 16);
  padding: 1em;
  }
  
  &__label {
  grid-column: span 2;
  font-weight: bold;
  margin: 0;
  }

  &__select, &__btn {
  font-size: inherit;
  padding: .5em;
  }
  
  &__select {
  background-color: #FFF;
  border: 1px #ccc solid;
  width: 100%;
  }

  &__btn {
  background-color: #6F00EF;
  border: 0;
  color: #FFF;
  }
  
}
/*!

  Radancy Component Library: Select Navigation (External)

  Contributor(s):
  Michael "Spell" Spellacy

*/

(function() {

  "use strict";

  // Display which component in use via console:

  console.log("%cSelect Navigation (External)%cv1.2.0", "background: #2d2d2d; color: #fff; padding: 6px 10px; border-radius: 16px 0 0 16px; font-weight: 600;" , "background: #6e00ee; color: #fff; padding: 6px 10px; border-radius: 0 16px 16px 0; font-weight: 600;");

  var selectExternalClass = ".select-external";
  var selectExternalLabelClass = ".select-external__label";
  var selectExternalSelectClass = ".select-external__select";
  var selectExternalBtnClass = ".select-external__btn";
  var selectExternalLabel = document.querySelectorAll(selectExternalLabelClass);
  var selectExternalSelect = document.querySelectorAll(selectExternalSelectClass);
  var selectExternalBtn = document.querySelectorAll(selectExternalBtnClass);

  selectExternalLabel.forEach(function(label, e){

    label.setAttribute("for", "select-external-" + (e + 1));

  });

  selectExternalSelect.forEach(function(select, e){

    select.setAttribute("id", "select-external-" + (e + 1));

  });

  selectExternalBtn.forEach(function(button){

    button.addEventListener("click", function () {

      var selectExternalSelected = this.closest(selectExternalClass).getElementsByTagName("select")[0];

      location.href = selectExternalSelected.value;

    });

  });

})();

Using Select Element for Navigation

How we build components and the behaviors that they exhibit can have a serious impact on people with disabilities. Navigation components come in several different flavors. One such version of this is using the select element to navigate. By sticking to the following rules, we can ensure that this navigation type works well for everybody!

  1. All select menus must include a submit button. Unexpectedly taking a user to another page, without warning, will cause a change of context. This can be confusing to users and it is a WCAG failure.
  2. If you wish to navigate away from a page without a submit button, then use a hyperlink or a disclosure that reveals a list of hyperlinks to other pages.
  3. A select menu must always contain a label element. This label should include a note on anticipated behavior.
  4. The only exception to the above rules are select menus that change content within the page. Here, a submit button is not required. Please see Select Navigation (Internal) for more details.

Properties

Use the following properties to configure this component.

ARIA Applies To Note Description
aria-label nav Mandatory
Used to pass a custom label to nav element. All menus must have a unique name describing them. Multiple menus on the page, should have a unique name.

Class Applies To Note Description
.select-external div, section Mandatory
Used on the parent element that wraps your menu.
.select-external__nav nav Mandatory
Used on the nav element that wraps your label, select, and button elements.
.select-external__select select Mandatory
Used on the menu navigation.
.select-external__button button Mandatory
Used on the menu submit button.

Release Notes

Keep up to date on major changes to this component.

Note
The for attribute for the label and id attribute for the select are intentionally omitted. Their inclusion is handled by the script so that multiple navigations on the page do not accidentally use the same identifier.
Note
Multiple select menus per-page are allowed.

Report Issues

Find a bug? Want a new feature? Report it on JIRA. You're so awesome!