Layout & Navigation

Quick Reference

This sidebar is optional and should be used for supplementary information if used at all. On mobile, this sidebar will be positioned over content from the left-hand side.

Topics

Menu Options

Option 1: Single-level Menu

An optional horizontal menu bar.


<div id="menu">
  <ul id="menu-options">
    <li><a href="index.html" class="active-tab">Home</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
  </ul>
</div>

Option 2: Multi-level Menu

Hover over "Layout/Nav" tab in menu above for example.


<div id="menu">
  <ul id="menu-options">
    <li><a href="index.html" class="active-tab">Home</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a>
      <ul class="dropdown-content">
        <li><a href="#">Link With Long Title</a></li>
        <li><a href="#">Another Link With Long Title</a></li>
        <li><a href="#">Short Link</a></li>
      </ul>
    </li>
  </ul>
</div>

Content Sections

See sidebar for instructions on adding a sidebar. Gray sections to delineate between types of content can be achieved with a content-section class on a div.