causeway-standard-theme/causeway/docs/components/menus/page-menu.html

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

  <p>
    The page menu consists of list of items, each of which can also be a <a href="/docs/components/menus.html#menus-dropdown">dropdown</a>.
  </p>
  <p>
    Menu items can also be given a class to bring in some default stylings (<code>"active"</code> or <code>"disabled"</code>).
  </p>

  <ul class="nav nav-pills">
    <li class="active">
      <a href="#">
        Menu Item 1
      </a>
    </li>
    <li class="disabled">
      <a href="#">
        Menu Item 2
      </a>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-hover="dropdown">
        Menu Item 3
        <span class="fa fa-chevron-down"></span>
      </a>
      <ul class="dropdown-menu">
        <li>
          <a href="#" class="has-tooltip" data-toggle="tooltip" data-title="This is a tooltip">
            Menu Item 3a
          </a>
        </li>
        <li>
          <a href="#" class="has-tooltip" data-toggle="tooltip" data-title="This is a tooltip">
            Menu Item 3b
          </a>
        </li>
        <li>
          <a href="#" class="has-tooltip" data-toggle="tooltip" data-title="This is a tooltip">
            Menu Item 3c
          </a>
        </li>
      </ul>
    </li>
  </ul>

  <br/>

  <pre>
    <code>
      &lt;ul class=&quot;nav nav-pills&quot;&gt;
        &lt;li class=&quot;active&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;
            Menu Item 1
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;disabled&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;
            Menu Item 2
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;dropdown&quot;&gt;
          &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-hover=&quot;dropdown&quot;&gt;
            Menu Item 3
            &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;
                Menu Item 3a
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;
                Menu Item 3b
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;
                Menu Item 3c
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    </code>
  </pre>
</section>