Skip to content
Quick and simple dropdown menu component for MDL
Branch: master
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.
src
.jscsrc
LICENSE
README.md

README.md

Dropdown Component

A quick dropdown system to be used with Material Design Lite.

WARNING: This is still very early.

Usage

To install the component

  1. Reference src/dropdown.js in your markup so it will be included as a script.
  2. Build MDL's Sass and add src/dropdown.scss after the rest of MDL.

Within your page

  1. Code an anchor to be the trigger for the dropdown. Give it the component-js-dropdown class to setup the dropdown menu. Also provided is a dropdown-navigation__header class that styles it like a normal menu item.
    <a class="dropdown-navigation__header component-js-dropdown" title="Gaming">
        Gaming
    </a>
  1. Add the arrow icons within the header. These will be displayed so users know the dropdown's state.
    <a class="dropdown-navigation__header component-js-dropdown" title="Gaming">
        Gaming
        <span class="material-icons dropdown-inactive">arrow_drop_down</span>
        <span class="material-icons dropdown-active ">arrow_drop_up</span>
    </a>
  1. The next child in the DOM should be menu this trigger will target. This element contains the anchors for the menu.
<div class="dropdown-navigation__menu">
    <a class="mdl-navigation__link" href="gaming/mtg" title="Magic: The Gathering">Magic: the Gathering</a>
    <a class="mdl-navigation__link" href="gaming/dnd" title="Dungeons & Dragons">Dungeons & Dragons</a>
</div>

Final code:

<a class="dropdown-navigation__header component-js-dropdown" title="Gaming">Gaming</a>
<div class="dropdown-navigation__menu">
    <a class="mdl-navigation__link" href="gaming/mtg" title="Magic: The Gathering">Magic: the Gathering</a>
    <a class="mdl-navigation__link" href="gaming/dnd" title="Dungeons & Dragons">Dungeons & Dragons</a>
</div>
You can’t perform that action at this time.