Foreign Affairs Style Guide

Foreign Affairs

Internal Navigation -- Left Rail

This is the left rail navigation that appears on most internal pages.

Data Sources:
Images Styles:
Known Omissions:
<nav class ="internal-nav">
  <a class="internal-nav__trigger" href="#">Section Title <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="31.1 741 937.8 610.1" enable-background="new 31.1 741 937.8 610.1" xml:space="preserve">
<g>
	<polygon points="500,1351.1 31.1,882.1 52.3,741 500,1188.7 947.7,741 968.9,882.1 	"/>
</g>
</svg>
</a>
  <ul class="internal-nav-container">
    <li><a class="internal-nav__item active" href="#">Subsection title</a></li>
    <li><a class="internal-nav__item" href="#">Subsection title</a></li>
    <li><a class="internal-nav__item" href="#">Subsection title</a></li>
    <li><a class="internal-nav__item" href="#">Subsection title</a>
    <li><a class="internal-nav__item--has-children active" href="#">Subsection title</a>
      <ul class="intern-nav__item-children">
        <li><a class="internal-nav__item-child" href="#">Subsection title</a></li>
        <li><a class="internal-nav__item-child" href="#">Subsection title</a></li>
        <li><a class="internal-nav__item-child active" href="#">Subsection title</a></li>
        <li><a class="internal-nav__item-child" href="#">Subsection title</a></li>
      </ul>
    </li>
    <li><a class="internal-nav__item" href="#">Subsection title</a></li>
    <li><a class="internal-nav__item" href="#">Subsection title</a></li>
  </ul>
</nav>