Featherweight, style-agnostic dropdown UI component

[ This description is mirrored from README.md at github.com/SimpleElements/simple-dropdown on 2019-05-22 ]

Simple Dropdown

Build status Size Version Published

Performant, featherweight, style-agnostic dropdown UI component, built on Web Components.

<simple-dropdown origin="top right" label="menu" arrow>
  <a href="#">settings</span>
</simple-dropdown>

Contents

Installation & usage

Install simple-dropdown with Bower

$ bower i SimpleElements/simple-dropdown --save

Import it into the <head> of your page

<link rel="import" href="/bower_components/simple-dropdown/simple-dropdown.html">

Then use simple-dropdown in your project

<simple-dropdown></simple-dropdown>

Polyfills for cross-browser support

simple-dropdown relies on emerging standards, for full cross-browser support include the WebComponentsJS polyfill on your page.

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^1.0.0/webcomponents-loader.js"></script>

Transpiling for IE11 support

Web Components like simple-dropdown are distributed as ES6 classes, which are supported in all evergreen browsers. To support Internet Explorer 11 you should transpile simple-dropdown to ES5 and use the webcomponentsjs custom-elements-es5-adapter.js shim.

The easiest way to do this is by including polymer-build in your buildstep of choice. Then just include the ES5 adapter on your page

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@^1.0.0/custom-elements-es5-adapter.js"></script>

Options

Property Type Default Description
active Boolean false Whether the dropdown is open or not
origin String '' Position the menu should open from. Can be any combination of 'top', 'bottom', 'left', 'center, or 'right'.
label String '' Optional label to display in toggle button
icon String simple-dropdown:expand-more Icon definition, from iron-iconset, set to empty string to hide icon
noTap Boolean false Disable openeing menu on tap/click
noIconRotate Boolean false Whether icon should flip when dropdown is open
arrow Boolean false Add a callout-style arrow to the dropdown menu

Properties can either be set as attributes on the element, or imperitively with Javascript

<simple-dropdown position="top left" arrow></simple-dropdown> 

<script>
  document.querySelector('simple-dropdown').active = true;
</script>

Styling

Style simple-dropdown with custom CSS properties and mixins

Property Default Description
--simple-dropdown-icon-size 18px Size of the toggle icon
--simple-dropdown-gutter 0 Spacing between the toggle and the menu when open
--simple-dropdown-offset -5px Left/right offset of the dropdown menu when open, relative to the toggle
--simple-dropdown-border-radius 3px Border radius applied to menu

Apply properties on simple-dropdown

simple-dropdown {
  --simple-dropdown-icon-size: 1rem;
}
Mixin Description
--simple-dropdown-toggle Mixin applied to the toggle button
--simple-dropdown-menu Mixin applied to the menu

Define mixins on simple-dropdown

simple-dropdown {
  --simple-dropdown-menu: {
    background: blue;
    color: white;
    padding: 12px 18px;
  }
}

MIT © Sean King

Install

Link to this version
ImportedReleased 24 October 2017MIT License
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (0.4.1)
Browser Compatibility
Install with
bower install --save SimpleElements/simple-dropdown"#1.0.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.0

Dependencies

  • polymer#^2.0.0
  • iron-iconset-svg#PolymerElements/iron-iconset-svg#^2.1.0
  • iron-icon#PolymerElements/iron-icon#^2.0.1
  • simple-callout#SimpleElements/simple-callout#^1.0.0