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

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

  <p>
    The site menu must only appear in the <a href="/docs/shells.html#header">site header</a>. It 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>

  <nav class="navbar site-menu" role="navigation">
    <ul class="nav navbar-nav">
      <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="#">
              Menu Item 3a
            </a>
          </li>
          <li>
            <a href="#">
              Menu Item 3b
            </a>
          </li>
          <li>
            <a href="#">
              Menu Item 3c
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav>

  <br/>

  <pre>
    <code>
      &lt;nav class=&quot;navbar site-menu&quot; role=&quot;navigation&quot;&gt;
        &lt;ul class=&quot;nav navbar-nav&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;
      &lt;/nav&gt;
    </code>
  </pre>

</section>