components

Navigation

Enables a site to have a deep navigational structure.

Desktop View
 
  • <div class="lp__left_nav">
    <ul class="lp__left_nav_list">
    <li><a class="lp__left_nav_list_item " href="http://www.worldbank.org/en/about/annual-report" title="Agriculture">Archives Home</a></li>
    <li><a class="lp__left_nav_list_item" href="http://www.worldbank.org/en/about/annual-report/message" title="Agriculture">Access to Archives </a></li>
    <ul class="lp__left_nav_sublist">
      <li><a class="lp__left_nav_list_item active disabled" href="#" title="Agriculture">History</a> </li>
      <ul>
        <li><a class="lp__left_nav_sublist_item" href="#" title="Agriculture">Past Presidents</a></li>
        <li><a class="lp__left_nav_sublist_item" href="#" title="Agriculture">Exhibits</a></li>
      </ul>
    </ul>
    <li><a class="lp__left_nav_list_item" href="#" title="Agriculture">Oral History</a></li>
    <li><a class="lp__left_nav_list_item" href="http://www.worldbank.org/en/who-we-are" title="Agriculture">Past Events</a></li>
    <li><a class="lp__left_nav_list_item" href="http://www.worldbank.org/en/about/archives" title="Agriculture">Web Archives</a></li>
  </ul>              
</div>
  • Use:

    On sites with a lot of content and a deep navigational structure. Left Nav makes it easy for users to tell where they are in the structure of the sight, but it is still suggested that Breadcrumb Navigation be used to supplement.


    Don’t Use:

    On sites with a simple navigation architecture.


    Visual Style:

    The Left Nav allows for primary navigation and an indented secondary navigation to be consolidated within an easily digestible, vertical list layout. Each navigational link is separated from the ones above and below by horizontal lines, and the active page is indicated by the link for that page is bolded and darkened.


    Behavior:

    Secondary navigation is hidden until related "parent" page has been navigated to. At this point, the "child" pages links are listed below the "parent" link in the Left Nav. The "child" page links disappear when the user navigates away from that branch of content.

  • Women Business and the Law:

    In this example WBL is using Left Nav only for top level navigation.
Mobile View
 
  • <div class="lp__left_nav_mobile">
    <button type="button" class="lp__left_nav_dropdown" data-toggle="collapse" data-target="#nav-collapse"> 
    <span class="filter-option">Archives Home</span><span class="nav-dropdown-arrow"></span>
    </button>
    <div class="collapse lp__left_nav lp__left_nav_dropdown_list" id="nav-collapse">
      <ul>
        <li><a class="lp__left_nav_list_item " href="#" title="Agriculture">Archives Home</a></li>
        <li><a class="lp__left_nav_list_item" href="#" title="Agriculture">Access to Archives </a></li>
        <ul class="lp__left_nav_sublist">
          <li>
            <a class="lp__left_nav_list_item active" href="http://www.worldbank.org/en/about/annual-report" title="Agriculture">History</a> 
             <a class="expanded-menu" id="nav1" title="Projects" href="javascript:toggleclass('#nav-click','#nav1')" style="float: right"><span><i class="loop loop-angle-down"></i></span><span class="lp__sr_only">next</span></a>
              <ul style="display: none;" id="nav-click">
                <li><a class="lp__left_nav_sublist_item" href="#" title="Agriculture">Past Presidents</a></li>
                <li><a class="lp__left_nav_sublist_item" href="#" title="Agriculture">Exhibits</a></li>
              </ul>
          </li>
        </ul>
        <li><a class="lp__left_nav_list_item" href="#" title="Agriculture">Oral History</a></li>
        <li><a class="lp__left_nav_list_item" href="#" title="Agriculture">Past Events</a></li>
        <li><a class="lp__left_nav_list_item" href="#" title="Agriculture">Web Archives</a></li>
      </ul>
    </div>
</div>