A Custom Element to augment select elements.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src
test
.gitignore
Gemfile
Gemfile.lock
LICENSE
Makefile
README.md
_config.yml
bower.json
package.json

README.md

navigation-select-element

WIP y'all

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 navigation-select-element --save
npm install 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.