causeway-standard-theme/causeway/docs/shells/left-navigation-rightpane.html

<div class="container page shell-left-navigation has-two-pane">
  <div class="navigation-pane-left">
    <div class="navigation-content-wrapper">
      <div class="navigation-header">
        <h2>Dummy links below - Example</h2>
      </div>
      <div class="navigation-content">
        <ul class="navigation-list">
          <li><a href=#">Send</a></li>
          <li class="active"><a href="#">Receive</a></li>
          <li><a href="#">Approve</a></li>
          <li><a href="#">Trading Relationships</a></li>
          <li><a href="#">Batch Management</a></li>
          <li><a href="#">My Details</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Reporting</a></li>
          <li><a href="#">PO to Invoice</a></li>
          <li><a href="#">Product Codes</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="divider divider-navigation">
    <span class="handle"></span>
  </div>
  <div class="navigation-pane-right">
    <div class="two-pane-horizontal">
      <div class="pane-top">
        <div class="pane-wrapper">
          <div class="pane">
            <h1 class="title">Two pane - Horizontal</h1>
            <section>
              <p>Default top and bottom pane height will share the total height of page and the divider will be placed accordingly.</p>

              <p>Class <code>has-two-pane</code> should be added to
                <code>.container page shell-left-navigation</code> if two pane is used with left shell navigation</p>

              <p>Like this <code>&lt;div class=&quot;container page shell-left-navigation has-two-pane&quot;&gt;</code>
              </p>

              <p><strong> Example Code</strong></p>
    <pre><code>
    &lt;div class=&quot;container page shell-left-navigation has-two-pane&quot;&gt;
      &lt;div class=&quot;navigation-pane-left&quot;&gt;
        &lt;div class=&quot;navigation-content-wrapper&quot;&gt;
          &lt;div class=&quot;navigation-header&quot;&gt;
            .
            .
            .
          &lt;/div&gt;
          &lt;div class=&quot;navigation-content&quot;&gt;
            .
            .
            .
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;divider divider-navigation&quot;&gt;
        &lt;span class=&quot;handle&quot;&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class=&quot;navigation-pane-right&quot;&gt;
        &lt;div class=&quot;two-pane-horizontal&quot;&gt;
          &lt;div class=&quot;pane-top&quot;&gt;
            &lt;div class=&quot;pane-wrapper&quot;&gt;
              &lt;div class=&quot;pane&quot;&gt;
                &lt;h3 class=&quot;title&quot;&gt;Two pane - Horizontal&lt;/h3&gt;
                &lt;section&gt;
                  &lt;!--Top Pane content goes here--&gt;
                &lt;/section&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;divider twopane-divider-horizontal&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;pane-bottom&quot;&gt;
            &lt;div class=&quot;pane-wrapper&quot;&gt;
              &lt;div class=&quot;pane&quot;&gt;
                &lt;!--This is optional. Include only if dark background is required--&gt;
                &lt;div class=&quot;pane-header-bg&quot;&gt;
                  &lt;h3 class=&quot;title&quot;&gt;Bottom Panel: Horizontal&lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class=&quot;bottom-content-panel&quot;&gt;
                  &lt;!--Bottom Pane content goes here--&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
            </section>
          </div>
        </div>
      </div>
      <div class="divider twopane-divider-horizontal"></div>
      <div class="pane-bottom">
        <div class="pane-wrapper">
          <div class="pane">
            <h1 class="title">Bottom Panel: Horizontal</h1>
            <div class="bottom-content-panel">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>