Ceri-dropdown NPM

ceri-dropdown

a advanced dropdown/up/left/right menu.

Features:

plain JS - no dependencies
themeable
use in your markup - easy to reason about
aware of the viewport - automatically changes opening direction to be visible

Demo

Install

npm install --save-dev ceri-dropdown

Usage

general ceri component usage instructions
in your project

window.customElements.define("ceri-dropdown", require("ceri-dropdown"))

<!-- as sibling (preferred) -->
<button>Click to open dropdown</button>
<ceri-dropdown>
  <li><span>Line 1</span></li>
</ceri-dropdown>
<!-- as child -->
<button>Click to open dropdown
  <ceri-dropdown>
    <li><span>Line 1</span></li>
  </ceri-dropdown>
</button>

For examples see dev/.

Props

Name	type	default	description
gutter	Number	0	horizontal offset
anchor	String	overlay ? "nw" : "sw"	point of the parent where it will be attached
keep-open	Boolean	false	will be not close on click outside of dropdown
constrain-width	Boolean	false	fix width to parent width
overlay	Boolean	false	will overlay parent
hover	Boolean	false	open on hover instead click
open	Boolean	false	set to open / close
on-body	Boolean	false	will be positioned on body instead of sibling/parent element. Detailed description

Events

Name	description
toggled(open:Boolean)	emitted before open and after close

Positioning

There are two ways of positioning. The default is in-place, the other possibility is on body.

The in-place positioning can be problematic when you have an overflow:hidden combined with a position:absolute|relative|fixed element in the parent chain and the dropdown is overflowing.
the body positioning can be problematic when the parent is moving relative to body or when you depend on inheritance of styles.

Themes

ceri-materialize

<button class=btn>Click me!</button>
<ceri-dropdown class=materialize constrain-width overlay>
  <li><span>Content</span></li>
  <li><span>Content2</span></li>
</ceri-dropdown>

Custom animation

read the documentation of the animate mixin.
read and understand the default enter and leave animation in src/dropdown.coffee
you can provide a custom animation like this:

# application wide
CEDD = require("ceri-dropdown")
CEDD.prototype.enter = (o) -> # your new enter animation
CEDD.prototype.leave = (o) -> # your new leave animation
window.customElements.define("ceri-dropdown", CEDD)

# single instance
# get a ref to your instance of ceri-dropdown somehow
# then overwrite the animations directly
ceDD.enter = (o) -> # your new enter animation
ceDD.leave = (o) -> # your new leave animation