causeway-standard-theme/causeway/docs/components/breadcrumb.html

<div class="container page">
  <div class="content pane single-pane">
    <section>
      <a id="breadcrumb"></a>
      <header class="content-header">
        <h1 class="title">Breadcrumb</h1>
      </header>

      <p>Indicate the current page's location within a navigational hierarchy.</p>
      <p>Separators are automatically added in CSS through <code>:before</code> and <code>content</code>.</p>
      <p>To get a normal link in the dropdown as shown in the example, you need to add class <code>link</code> to <code>&lt;li&gt;</code>. Example: <code>&lt;li class=&quot;link&quot;&gt;&lt;a href=&quot;#&quot;&gt;More&lt;/a&gt;&lt;/li&gt;</code></p>
      <br/>

      <h3 class="title">Example with a dropdown:</h3>
      <ol class="breadcrumb">
        <li><a href="#">Causeway LTD</a></li>
        <li class="dropdown">
          <a href="#" data-toggle="dropdown">Carillion
            <span class="fa fa-chevron-down"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Sub Company A</a></li>
            <li><a href="#">Sub Company B</a></li>
            <li><a href="#">Sub Company C</a></li>
            <li class="link"><a href="#">More</a></li>
          </ul>
        </li>
      </ol>
      <pre><code>
      &lt;ol class=&quot;breadcrumb&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Causeway LTD&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;dropdown&quot;&gt;
            &lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;Carillion
            &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Company A&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Company B&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Company C&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;link&quot;&gt;&lt;a href=&quot;#&quot;&gt;More&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
      </code></pre>
      <br/>
      <h3 class="title">Example without a dropdown:</h3>
      <ol class="breadcrumb">
        <li><a href="#">Causeway LTD</a></li>
        <li><a href="#">Carillion</a></li>
      </ol>
      <pre><code>
      &lt;ol class=&quot;breadcrumb&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Causeway LTD&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Carillion&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
      </code></pre>
      <br/>
      <h2 class="title">
        Additional Menu (Three Line Menu)
      </h2>
      <p>Example:</p>
      <span class="additional-menu">
        <a href="#" data-toggle="dropdown">
          <span class="glyphicon glyphicon-threeLine-menu"></span>
        </a>

        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Site Map</a></li>
          <li><a href="#">Application Sample</a></li>
        </ul>
      </span>
      <br/>
      <pre><code>
      &lt;span class=&quot;additional-menu&quot;&gt;
        &lt;a href=&quot;#&quot; data-toggle=&quot;dropdown&quot;&gt;
          &lt;span class=&quot;glyphicon glyphicon-threeLine-menu&quot;&gt;&lt;/span&gt;
        &lt;/a&gt;

        &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Site Map&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Application Sample&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/span&gt;
      </code></pre>
    </section>
  </div>
</div>