SemanSemantic-UItic-UI/server/documents/modules/dropdown.html.eco

---
layout      : 'default'
css         : 'dropdown'

title       : 'Dropdown'
description : 'A dropdown is a hidden list of selections that a user can choose to have appear'
type        : 'UI Module'

element     : 'dropdown'
elementType : 'module'

themes      : ['Default']
---

<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/modules/dropdown.less" />

<script src="/javascript/dropdown.js"></script>


<%- @partial('header', { tabs: 'module' }) %>

<div class="main container">

  <div class="ui active tab" data-tab="definition">

    <div class="peek">
      <div class="ui vertical pointing secondary menu">
        <a class="active item">Types</a>
        <a class="item">Variations</a>
        <a class="item">States</a>
      </div>
    </div>


    <h2 class="ui dividing header">Types</h2>

    <div class="dropdown example">
      <h4 class="ui header">Dropdown</h4>
      <p>A basic dropdown has no special formatting of its own</p>
      <div class="ui dropdown">
        <div class="text">Select</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Edit</div>
          <div class="item">Remove</div>
          <div class="item">Hide</div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Inline</h4>
      <p>A dropdown can be formatted to appear inline in other content</p>
      <div>Show me posts trending
        <div class="ui inline dropdown">
          <div class="text">today</div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-text="today">Today</div>
            <div class="item" data-text="this week">This Week</div>
            <div class="item" data-text="this month">This Month</div>
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h4 class="ui header">Selection</h4>
      <p>A dropdown can point to other content to show its relationship</p>
      <div class="ui selection dropdown">
        <input type="hidden" name="gender">
        <div class="default text">Gender</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="1">Male</div>
          <div class="item" data-value="0">Female</div>
          <div class="item" data-value="2">Unknown</div>
        </div>
      </div>
    </div>


    <div class="button example">
      <h4 class="ui header">Floating</h4>
      <p>A dropdown menu can appear to be floating below an element.</p>
      <div class="ui teal buttons">
        <div class="ui button">Save</div>
        <div class="ui floating dropdown icon button">
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i>Edit Post</div>
            <div class="item"><i class="delete icon"></i>Remove Post</div>
            <div class="item"><i class="hide icon"></i>Hide Post</div>
          </div>
        </div>
      </div>
    </div>

    <div class="hover example">
    <h4 class="ui header">Pointing</h4>
    <p>A dropdown can be formatted so that its menu is pointing</p>
      <div class="ui compact menu">
        <div class="menu">
          <a class="active item">
            <i class="home icon"></i> Home
          </a>
          <div class="ui pointing dropdown link item">
            <i class="icon mail"></i> Messages <i class="dropdown icon"></i>
            <div class="menu">
              <a class="item"><i class="mail icon"></i>Inbox</a>
              <a class="item"><i class="book icon"></i>Archive</a>
            </div>
          </div>
          <a class="item">
            <i class="user icon"></i> Browse
          </a>
          <a class="item">
            <i class="question icon"></i> Help
          </a>
        </div>
      </div>
    </div>
    <div class="another button example">
      <div class="ui blue labeled icon top left pointing dropdown button">
        <i class="settings icon"></i>
        <span class="text">Settings</span>
        <div class="menu">
          <div class="item"><i class="edit icon"></i>Edit</div>
          <div class="item"><i class="delete icon"></i>Remove</div>
          <div class="item"><i class="hide icon"></i>Hide</div>
        </div>
      </div>
      <div class="ui red labeled icon top right pointing dropdown button">
        <i class="settings icon"></i>
        <span class="text">Settings</span>
        <div class="menu">
          <div class="item"><i class="edit icon"></i>Edit</div>
          <div class="item"><i class="delete icon"></i>Remove</div>
          <div class="item"><i class="hide icon"></i>Hide</div>
        </div>
      </div>
    </div>
    <div class="another button example">
      <div class="ui right pointing dropdown icon button">
        <i class="settings icon"></i>
        <div class="menu">
          <div class="item"><i class="edit icon"></i>Edit</div>
          <div class="item"><i class="delete icon"></i>Remove</div>
          <div class="item"><i class="hide icon"></i>Hide</div>
        </div>
      </div>
      <div class="ui left pointing dropdown icon button">
        <i class="settings icon"></i>
        <div class="menu">
          <div class="item"><i class="edit icon"></i>Edit</div>
          <div class="item"><i class="delete icon"></i>Remove</div>
          <div class="item"><i class="hide icon"></i>Hide</div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Simple</h4>
      <p>A simple dropdown can open without javascript</p>
      <div class="ui compact menu">
        <div class="ui simple dropdown item">
          Dropdown <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item">Choice 1</div>
            <div class="item">Choice 2</div>
            <div class="item">Choice 3</div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">Variations</h2>

    <div class="dropdown example">
      <h4 class="ui header">Fluid</h4>
      <p>A dropdown can take the full width of its parent</p>
      <div class="ui vertical menu">
        <a class="item">Link 1</a>
        <a class="item">Link 2</a>
        <div class="header item">All Sections</div>
        <div class="ui item">
          <div class="ui fluid selection dropdown">
            <div class="text">More</div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item">Choice 1</div>
              <div class="item">Choice 2</div>
              <div class="item">Choice 3</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="ui dividing header">States</h2>


    <div class="dropdown example">
      <h4 class="ui header">Error</h4>
      <p>An errored dropddown can alert a user to a problem</p>
      <div class="ui floating dropdown error">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
      <br><br>
      <div class="ui selection dropdown error">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>

    <h4 class="ui header">Simple Dropdown (No Javascript)</h4>
    <div class="example">
      <h4 class="ui header">Active</h4>
      <p>An active dropdown has its menu open</p>
      <div class="ui info message">An active state will only affect a simple dropdown. To activate a menu on a dropdown module use <code>$('.ui.dropdown').dropdown('show');</code></div>
      <div class="ui simple active dropdown">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
        </div>
      </div>
    </div>

    <div class="example">
      <h4 class="ui header">Disabled</h4>
      <p>A disabled dropdown menu will not open or close</p>
      <div class="ui info message">A disabled state will only affect a simple dropdown. To disable a dropdown module use <code>$('.ui.dropdown').dropdown('destroy');</code></div>
      <div class="ui simple disabled dropdown">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Choice 1</div>
          <div class="item">Choice 2</div>
          <div class="item">Choice 3</div>
        </div>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="usage">
    <h2 class="ui dividing header">Initializing</h2>

    <h3 class="ui header">Initializing a dropdown</h3>
    <div class="code" data-label="HTML" data-type="html">
      <div class="ui dropdown">
        <div class="text">Select</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="option1">Option 1</div>
          <div class="item" data-value="option2">Option 2</div>
        </div>
      </div>
    </div>
    <div class="code" data-label="Javascript" data-type="javascript">
      $('.ui.dropdown')
        .dropdown()
      ;
    </div>

    <h2 class="ui dividing header">Behavior</h2>

    <p>All the following <a href="/module.html#/behavior">behaviors</a> can be called using the syntax:</p>
    <div class="code">
    $('.your.element')
      .dropdown('behavior name', argumentOne, argumentTwo)
    ;
    </div>

    <table class="ui definition sortable celled table segment">
      <thead>
        <tr>
        <th>Behavior</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>toggle</td>
          <td>Toggles current visibility of dropdown</td>
        </tr>
        <tr>
          <td>show</td>
          <td>Shows dropdown</td>
        </tr>
        <tr>
          <td>hide</td>
          <td>Hides dropdown</td>
        </tr>
        <tr>
          <td>hide others</td>
          <td>Hides all other dropdowns that is not current dropdown</td>
        </tr>
        <tr>
          <td>restore defaults</td>
          <td>Restores dropdown text and value to its value on page load</td>
        </tr>
        <tr>
          <td>restore default text</td>
          <td>Restores dropdown text to its value on page load</td>
        </tr>
        <tr>
          <td>restore default value</td>
          <td>Restores dropdown value to its value on page load</td>
        </tr>
        <tr>
          <td>save defaults</td>
          <td>Saves current text and value as new defaults (for use with restore)</td>
        </tr>
        <tr>
          <td>set selected(value)</td>
          <td>Sets selected state to a given value</td>
        </tr>
        <tr>
          <td>set text(text)</td>
          <td>Sets dropdown text to a value</td>
        </tr>
        <tr>
          <td>set value(value)</td>
          <td>Sets dropdown input to value</td>
        </tr>
        <tr>
          <td>get text</td>
          <td>Returns current dropdown text</td>
        </tr>
        <tr>
          <td>get value</td>
          <td>Returns current dropdown input value</td>
        </tr>
        <tr>
          <td>get item(value)</td>
          <td>Returns DOM element that matches a given input value</td>
        </tr>
        <tr>
          <td>bind touch events</td>
          <td>Adds touch events to element</td>
        </tr>
        <tr>
          <td>mouse events</td>
          <td>Adds mouse events to element</td>
        </tr>
        <tr>
          <td>bind intent</td>
          <td>Binds a click to document to determine if you click away from a dropdown</td>
        </tr>
        <tr>
          <td>unbind intent</td>
          <td>Unbinds document intent click</td>
        </tr>
        <tr>
          <td>determine intent</td>
          <td>Returns whether event occurred inside dropdown</td>
        </tr>
        <tr>
          <td>determine select action(text, value)</td>
          <td>Triggers preset item selection action based on settings passing text/value</td>
        </tr>
        <tr>
          <td>set active</td>
          <td>Sets dropdown to active state
        <tr>
          <td>set visible</td>
          <td>Sets dropdown to visible state</td>
        </tr>
        <tr>
          <td>remove active</td>
          <td>rRemoves dropdown active state
        <tr>
          <td>remove visible</td>
          <td>Removes dropdown visible state</td>
        </tr>
        <tr>
          <td>is selection</td>
          <td>Returns whether dropdown is a selection dropdown</td>
        </tr>
        <tr>
          <td>is animated</td>
          <td>Returns whether dropdown is animated</td>
        </tr>
        <tr>
          <td>is visible</td>
          <td>Returns whether dropdown is visible</td>
        </tr>
        <tr>
          <td>is hidden</td>
          <td>Returns whether dropdown is hidden</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="ui tab" data-tab="examples">

    <h2 class="ui dividing header">Examples</h2>

    <div class="dropdown example">
      <h3 class="ui header">Re-selecting values</h3>
      <p>A dropdown will automatically select on page load any menu item that includes the currently value of <code>text</code> or your dropdown's hidden input value. This is used to preserve a user's selection on page navigation and will automatically remove and default text placeholder formatting.</p>

      Current action: <div class="ui inline dropdown">
        <div class="text">Hide</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Edit</div>
          <div class="item">Remove</div>
          <div class="item">Hide</div>
        </div>
      </div>

    </div>

    <div class="dropdown example">
    <h3 class="ui header">Button Group</h3>
      <p>A <a href="/elements/button.html">button group</a> can be formatted to show additional content as a dropdown</p>
      <div class="ui icon buttons">
        <div class="ui top left pointing dropdown button">
          <i class="user icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i>Edit User</div>
            <div class="item"><i class="delete icon"></i>Remove User</div>
            <div class="item"><i class="hide icon"></i>Make Invisible</div>
          </div>
        </div>
        <div class="ui top left pointing dropdown button">
          <i class="users icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i>Edit Group</div>
            <div class="item"><i class="delete icon"></i>Remove Group</div>
            <div class="item"><i class="hide icon"></i>Hide from Group</div>
          </div>
        </div>
        <div class="ui top right pointing dropdown button">
          <i class="settings icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i>Edit</div>
            <div class="item"><i class="delete icon"></i>Remove</div>
            <div class="item"><i class="hide icon"></i>Hide</div>
          </div>
        </div>
      </div>
    </div>


    <div class="button example">
      <h3 class="ui header">Combo Button</h3>
      <p>A <a href="/elements/button.html">button</a> can be formatted with a dropdown</p>
      <div class="ui teal buttons">
        <div class="ui button">Update Post</div>
        <div class="ui dropdown icon button">
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item"><i class="edit icon"></i>Edit Post</div>
            <div class="item"><i class="delete icon"></i>Remove Post</div>
            <div class="item"><i class="hide icon"></i>Hide Post</div>
          </div>
        </div>
      </div>
    </div>

    <div class="dropdown example">
      <h3 class="ui header">Multiple Levels</h3>
      <p>A dropdown menu can also contain sub menus inside of it</p>
      My favorite animal breed is <div class="ui inline dropdown">
        <input type="hidden" name="gender">
        <div class="text">Shiba Inu</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">
            <i class="dropdown icon"></i>
            Dogs
            <div class="menu">
              <div class="item">Shiba Inu</div>
              <div class="item">Poodle</div>
              <div class="item">Labrador</div>
            </div>
          </div>
          <div class="item">
            <i class="dropdown icon"></i>
            Cats
            <div class="menu">
              <div class="item">Aegean</div>
              <div class="item">Balinese</div>
              <div class="item">Persian</div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="hover example">
      <h3 class="ui header">Menu</h3>
      <p>A <a href="/collections/menu.html">menu</a> element can contain a dropdown</p>
        <div class="ui compact tiered purple inverted menu">
          <div class="menu">
            <a class="active item">
              <i class="icon home"></i> Home
            </a>
            <a class="ui dropdown item">
              <i class="icon mail"></i> Messages <i class="dropdown icon"></i>
              <div class="menu">
                <div class="item">
                  <i class="mail icon"></i>Categories
                  <div class="menu">
                    <div class="item">Unread</div>
                    <div class="item">Promotions</div>
                    <div class="item">Updates</div>
                  </div>
                </div>
                <div class="item"><i class="book icon"></i>Archive</div>
              </div>
            </a>
            <a class="item">
              <i class="user icon"></i> Browse
            </a>
          </div>
          <div class="sub menu">
            <a class="item">Activity Feed</a>
            <a class="item">Profile</a>
            <a class="item">Events</a>
          </div>
        </div>
    </div>

    <div class="dropdown example">
      <h3 class="ui header">Form</h3>
      <p>A dropdown can be formatted to allow selection inside a <a href="/collections/form.html">form</a></p>
      <div class="ui form segment">
        <p>Let's go ahead and get you signed up.</p>
        <div class="two fields">
          <div class="field">
            <label>First Name</label>
            <input placeholder="First Name" type="text">
          </div>
          <div class="field">
            <label>Last Name</label>
            <input placeholder="Last Name" type="text">
          </div>
        </div>
        <div class="field">
          <label>Gender</label>
          <div class="ui dropdown selection">
            <input type="hidden" name="gender">
            <div class="default text">...</div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div class="item" data-value="male">Male</div>
              <div class="item" data-value="female">Female</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="transition example">
      <h3 class="ui header">Transitions</h3>
      <p>A dropdown can have different <a href="/modules/transition.html">transitions</a>.</p>
      <div class="ui teal buttons">
        <div class="ui button">Toggle</div>
        <div class="ui floating dropdown icon button">
          <i class="dropdown icon"></i>
          <div class="menu">
            <div class="item" data-value="horizontal flip">Horizontal Flip</div>
            <div class="item" data-value="fade up">Fade Up</div>
            <div class="item" data-value="scale">Scale</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="ui tab" data-tab="settings">

    <h3 class="ui header">
      Dropdown Settings
      <div class="sub header">Dropdown settings modify the dropdown's behavior</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>on</td>
          <td>click</td>
          <td>Event used to trigger dropdown (Hover, Click)</td>
        </tr>
        <tr>
          <td>delay</td>
          <td>
          <div class="code">
      delay: {
        show: 50,
        hide: 300
      }
          </div>
          </td>
          <td>Time in milliseconds to debounce show or hide behavior when <code>on: hover</code> is used.</td>
        </tr>
        <tr>
          <td>transition</td>
          <td>
            slide down
          </td>
          <td>Named transition to use when animating menu in and out. Fade and slide down are available without including <a href="/modules/transition.html">ui transitions</a></td>
        </tr>
        <tr>
          <td>duration</td>
          <td>
            250
          </td>
          <td>Duration of animation events</td>
        </tr>
        <tr>
          <td>action</td>
          <td>auto</td>
          <td>Sets a default action to occur.
          <div class="ui vertical divided list">
            <div class="item">
              <div class="header">activate</div>
              <div class="description">Most likely action will be determined by type of dropdown, for example a selection dropdown will automatically use updateForm</div>
            </div>
            <div class="item">
              <div class="header">combo</div>
              <div class="description">changes text of previous element matching text selector</div>
            </div>
            <div class="item">
              <div class="header">select</div>
              <div class="description">activates menu item but does not change text</div>
            </div>
            <div class="item">
              <div class="header">nothing</div>
              <div class="description">no action occurs</div>
            </div>
            <div class="item">
              <div class="header">hide</div>
              <div class="description">Dropdown menu is hidden</div>
            </div>
            <div class="item">
              <div class="header">function(){}</div>
              <div class="description">custom function is executed</div>
            </div>
          </div>
        </tr>
      </tbody>
    </table>

    <div class="ui horizontal section divider"><i class="icon setting"></i></div>
    <h3 class="ui header">
      Callbacks
      <div class="sub header">Callbacks specify a function to occur after a specific behavior.</div>
    </h3>

    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th class="four wide">Setting</th>
        <th>Context</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>onChange(value, text)</td>
          <td>Dropdown</td>
          <td>Is called after a dropdown item is selected. receives the name and value of selection.</td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>Dropdown</td>
          <td>Is called after a dropdown is shown.</td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>Dropdown</td>
          <td>Is called after a dropdown is hidden.</td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">
      DOM Settings
      <div class="sub header">DOM settings specify how this module should interface with the DOM</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>namespace</td>
          <td>dropdown</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>selector</td>
          <td colspan="2">
            <div class="code">
      selector : {
        input : '> input[type="hidden"]',
        item  : '.menu > .item',
        menu  : '.menu',
        text  : '> .text'
      }
            </div>
          </td>
        </tr>
        <tr>
          <td>metadata</td>
          <td colspan="2">
            <div class="code">
      metadata: {
        text  : 'text',
        value : 'value'
      }
            </div>
          </td>
        </tr>
        <tr>
          <td>className</td>
          <td colspan="2">
            <div class="code">
      className : {
        active      : 'active',
        disabled    : 'disabled',
        placeholder : 'default',
        visible     : 'visible'
      }
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <h3 class="ui header">
      Debug Settings
      <div class="sub header">Debug settings controls debug output to the console</div>
    </h3>
    <table class="ui celled sortable definition table segment">
      <thead>
        <tr>
        <th>Setting</th>
        <th class="four wide">Default</th>
        <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>Dropdown</td>
          <td>Name used in debug logs</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>True</td>
          <td>Provides standard debug output to console</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>True</td>
          <td>Provides ancillary debug output to console</td>
        </tr>
        <tr>
          <td>error</td>
          <td colspan="2">
            <div class="code">
      error   : {
        action    : 'You called a dropdown action that was not defined',
        method    : 'The method you called is not defined.',
        transition : 'The requested transition was not found'
      }
            </div>
          </td>
        </tr>
      </tbody>
    </table>

  </div>

</div>