causeway-standard-theme/causeway/docs/components/menus/dropdown.html

<section>
  <a id="menus-dropdown"></a>
  <header class="content-header">
    <h1 class="title">
      Dropdown Menu
    </h1>
  </header>

  <p>
    Dropdowns form the basis for all of the menu types available in this theme.
  </p>
  <p>
    They comprise of a surround with a class of <code>"dropdown"</code>, a trigger element (preferably containing a caret) and a list (unordered <code>&lt;ul&gt;</code> or ordered <code>&lt;ol&gt;</code>).
  </p>
  <p>
    The trigger element must have a class of <code>"dropdown-toggle"</code> and an attribute of either <code>"data-toggle"</code> or <code>"data-hover"</code> set to <code>"dropdown"</code>. The list must have a class of <code>"dropdown-menu"</code>.
  </p>
  <br/>
  <br/>
  <p>
    The attributes on the trigger element cause differing behaviour:
  </p>
  <table class="table table-striped example-dropdowns">
    <thead>
      <tr>
        <th>
          Attribute
        </th>
        <th>
          Effect
        </th>
        <th>
          Caveats
        </th>
        <th class="last-column">
          Examples
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4"></td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          <code>data-toggle</code>
        </td>
        <td>
          The dropdown appears when the trigger element is clicked and disappears when the trigger element is clicked for a second time.
        </td>
        <td>
          The trigger element cannot be used as a link when used in this manner.
        </td>
        <td>
          <div class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Toggle Example
              <span class="fa fa-chevron-down"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">
                  Action
                </a>
              </li>
              <li>
                <a href="#">
                  Another action
                </a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <code>data-hover</code>
        </td>
        <td>
          The dropdown appears when the cursor hovers over the trigger element and disappears a few seconds after the cursor leaves the element.
        </td>
        <td>
        </td>
        <td>
          <div class="dropdown">
            <a href="#" class="dropdown-toggle" data-hover="dropdown">
              Hover Example
              <span class="fa fa-chevron-down"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">
                  Action
                </a>
              </li>
              <li>
                <a href="#">
                  Another action
                </a>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <pre>
    <code>
      <span class="title">
        Toggle Example
      </span>
      &lt;div class=&quot;dropdown&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
          Toggle Example
          &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li&gt;
            &lt;a href=&quot;#&quot;&gt;
              Action
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;#&quot;&gt;
              Another action
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      <br/>
      <span class="title">
        Hover Example
      </span>
      &lt;div class=&quot;dropdown&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-hover=&quot;dropdown&quot;&gt;
          Hover Example
          &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li&gt;
            &lt;a href=&quot;#&quot;&gt;
              Action
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;#&quot;&gt;
              Another action
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    </code>
  </pre>

  <br/>

  <p>
    Menu items can also be given a class to bring in some default stylings (<code>"dropdown-header"</code>, <code>"active"</code> or <code>"disabled"</code>). A separator item (an <code>&lt;li&gt;</code> tag with a class of <code>"divider"</code>) can be used to help differentiate between sub sections:
  </p>

  <div class="dropdown">
    <a href="#" class="dropdown-toggle" data-hover="dropdown">
      Item Styles
      <span class="fa fa-chevron-down"></span>
    </a>
    <ul class="dropdown-menu">
      <li class="dropdown-header">
        Header Item
      </li>
      <li class="divider"></li>
      <li class="active">
        <a href="#">
          Active Item
        </a>
      </li>
      <li class="disabled">
        <a href="#">
          Disabled Item
        </a>
      </li>
      <li>
        <a href="#">
          Default Item
        </a>
      </li>
    </ul>
  </div>

  <br/>

  <pre>
    <code>
      &lt;div class=&quot;dropdown&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-hover=&quot;dropdown&quot;&gt;
          Item Styles
          &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li class=&quot;dropdown-header&quot;&gt;
            Header Item
          &lt;/li&gt;
          &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
          &lt;li class=&quot;active&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
              Active Item
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;disabled&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
              Disabled Item
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;#&quot;&gt;
              Default Item
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    </code>
  </pre>
</section>

<section>
  <a id="menus-dropdown-submenus"></a>
  <header class="content-header">
    <h3 class="title">
      Submenus
    </h3>
  </header>

  <p>
    For menus with large sub sections it is desirable to split these out into specific submenus. This can be accomplished by treating a menu item as a trigger element and adding a new dropdown menu alongside it.
  </p>
  <p>
    The surround for the submenu trigger element should replace the <code>"dropdown"</code> class with <code>"dropdown-submenu"</code> and the trigger element itself should omit any <code>"dropdown-toggle"</code> class or <code>"dropdown-hover"</code> or <code>"dropdown-toggle"</code>  attributes.
  </p>


  <div class="dropdown">
    <a href="#" class="dropdown-toggle" data-hover="dropdown">
      Submenu Example
      <span class="fa fa-chevron-down"></span>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="#">
          Action
        </a>
      </li>
      <li class="dropdown-submenu">
        <a href="#">
          Open Submenu
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">
              Another action
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <pre>
    <code>
      &lt;div class=&quot;dropdown&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-hover=&quot;dropdown&quot;&gt;
          Submenu Example
          &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class=&quot;dropdown-menu&quot;&gt;
          &lt;li&gt;
            &lt;a href=&quot;#&quot;&gt;
              Action
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class=&quot;dropdown-submenu&quot;&gt;
            &lt;a href=&quot;#&quot;&gt;
              Open Submenu
            &lt;/a&gt;
            &lt;ul class=&quot;dropdown-menu&quot;&gt;
              &lt;li&gt;
                &lt;a href=&quot;#&quot;&gt;
                  Another action
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    </code>
  </pre>
</section>