navigation-select-element

navigation-select-element is a Custom Element to augment select elements to perform redirects when changed, meant to be used as a replacement for navigation menus on small viewports.

Installation

You can install it through Bower or NPM:

bower install plataformatec/navigation-select-element --save
npm install plataformatec/navigation-select-element --save

You will need to include a Custom Elements polyfill for browsers that does not support Custom Elements yet.

bower install --save webcomponentsjs

Usage

You can extend existing select elements using the is attribute to turn them into navigation-select ones.

<select is='navigation-select'>
  <option value>Select an option to navigate</option>
  <option value='/page-1'>Page 1</option>
  <option value='/page-2'>Page 2</option>
  <option value='https://github.com'>GitHub.com</option>
  <option value='/'>Go back to /</option>
</select>

Turbolinks Support

For applications using Turbolinks, [Turbolinks.visit][turbolinks-visit] will be used instead of a traditional window.location = for navigating the user to its desired location.

TODO

• [ ] Support the Custom Elements v1 spec.
• [ ] Attach a navigation-select element to an existing element and copy anchors from it.
• [ ] Add support for customizing the Turbolinks action parameter.

License

Copyright © 2016-ω Plataformatec. See LICENSE file.