Navigation & Search

Active States

The .current class is used to designate the link that corresponds with the current page. The .active class is used on list items that are currently open.

<ul>
  <!-- .active is used on any open/active list item in the nav -->
  <li class="active">
    <a href="#">Current Section</a>
    <ul>
      <!-- .current is used on the link to the current page -->
      <li class="active"><a href="#" class="current">Current Page</a></li>
      <li><a href="#">Sibling Page</a></li>
    </ul>
  </li>
  <li><a href="#">Next Section</a></li>
</ul>

Top Navigation

The .nav-top-true and .nav-top-false classes affect the layout of the site on wider screens. These classes are used on the <body> tag.

<!-- Use `.nav-top-true` when primary navigation is at the top of the page, `.nav-top-false` when it is not. --->
<body class="nav-top-true">

When displayed, the top nav uses the following markup:

<nav id="nav-top" class="nav-top" role="navigation" aria-label="Primary navigation">
  <div id="primary">
    <ul>
      <li>
        <!-- Home Button -->
        <a href="/" aria-label="Home"><svg class="icon" width="16" height="16"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-home"></use></svg></a>
      </li>
      <!-- Additional nav items -->
      <!-- <li><a href="#">Nav Item</a></li> -->
      <li class="nav-search">
        <!-- Search Button -->
        <button class="btn-search search-toggle" aria-label="Toggle search"><svg class="icon"><use xlink:href="#icon-search"></use></svg></button>
      </li>
    </ul>
    <div class="nav-search-wrapper">
      <!-- Search Form -->
    </div>
  </div>
</nav>
Class Description
.nav-top Wraps both the top navigation and search.
.nav-search Wraps the search button.
.search-toggle Button that toggles the search form.
.nav-search-wrapper Wraps the search form.

Hiding the Home Icon

To hide the home icon on the top nav, the .navbar-only class can be used on the home link. The icon will still show up on the sticky nav.

<!-- Within `.nav-top` -->
<li><a href="/" class="navbar-only" aria-label="Home"><!-- ... --></a></li>

If the site has a top nav, a sticky nav will be automatically generated by the Web Theme JavaScript and appended to the page.

Side Navigation

In addition to the top navigation, two other navs also appear in the .page-sidebar area of the page. Both of them use the .nav-site class.

Full Navigation

On sites without a top navigation, a full site nav will be used in the sidebar throughout the site. On sites with a top navigation, this full nav will still be used for mobile users. On smaller devices, it will appear at the bottom of the page, and will be used as the source of the content that goes in the mobile drawer.

<!-- <div class="page-sidebar"> -->
  <nav id="nav" class="nav-site nav-full" role="navigation" aria-label="Primary navigation">
    <ul class="depth_1">
      <li><a href="/">Home</a></li>
      <!-- Active section of the site -->
      <li class="active"><a href="/section-1/">Section 1</a>
        <ul class="depth_2">
          <!-- Current page -->
          <li class="active"><a href="/section-1/page-1/" class="current">Sub Page 1</a></li>
          <li class=""><a href="/section-1/page-2/">Sub Page 2</a></li>
          <li class=""><a href="/section-1/page-3/">Sub Page 3</a></li>
        </ul>
      </li>
      <li><a href="/section-2/">Section 2</a>
      <li><a href="/section-3/">Section 3</a>
    </ul>
  </nav>
<!-- ... -->
<!-- </div> -->

Section Navigation

In addition to the full navigation in the sidebar, there is also a section navigation that is restricted to the current section of the site. This navigation goes right after the full navigation element in the sidebar.

<!-- <div class="page-sidebar"> -->

<!-- Full Site Navigation -->
<nav id="nav" class="nav-site nav-full" role="navigation" aria-label="Primary navigation"><!-- ... --></nav>

<!-- Section-specific Navigation -->
<nav class="nav-section nav-site" role="navigation" aria-label="Section navigation">
  <!-- Starts at 2nd level in the site -->
  <ul class="depth_2">
    <li class="active"><a href="/section-1/page-1/" class="current">Sub Page 1</a></li>
    <li class=""><a href="/section-1/page-2/">Sub Page 2</a></li>
    <li class=""><a href="/section-1/page-3/">Sub Page 3</a></li>
  </ul>
</nav>
<!-- ... -->

<!-- </div> -->

CSS Reference

Class Description
.nav-site Used for styling side navs.
.nav-full Includes home and top-level pages.
.nav-section Includes only the current section of the site.
ID Description
#nav Designates main navigation of the site. Used by the Web Theme JavaScript as the source for the mobile drawer, and is displayed at the bottom of every page on mobile.

Mobile Navigation

Drawer

The Web Theme JavaScript dynamically generates an element for a mobile drawer (.nav-mobile), and populates it with the content of the #nav element.

Mobile users have a sticky mobile nav bar that includes a link to Home, Search, and the full Menu. It may also include a link to “Contact” if applicable.

<div class="nav-mobile-util">
  <ul class="no-bullets">
    <li><a href="/"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-home"></use></svg> Home</a></li>
    <li><a href="/contact"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-envelope-o"></use></svg> Contact</a></li>
    <li><button class="btn-search search-toggle"><svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use></svg> Search</button>
    <li>
      <a href="#nav" class="nav-menu nav-skip">
      <svg version="1.1" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
        <line class="ni ni1" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="0.98" y1="2" x2="18.94" y2="2"/>
        <line class="ni ni2" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="0.98" y1="8.69" x2="18.94" y2="8.69"/>
      </svg>
      <span class="ni ni3">Menu</span>
    </a>
    </li>
  </ul>
  <div class="nav-search-wrapper">
    <!-- Search form -->
  </div>
</div>

The full navigation in the sidebar will be displayed at the bottom of the page on mobile.

Pagination

For times when there are too many items to list on single page, pagination should be used. News and events pages are common examples where this is needed. When used, a pagination list should include a previous button at the beginning, a next button at the end, as well as links to individual pages.

<div role="navigation" aria-label="Pagination" class="pagination" separator=" ">
  <!-- .previous_page is used for initial link -->
  <!-- rel="prev" is added to all links to the previous page -->
  <a class="previous_page" rel="prev" href="/page/2">Previous</a>
  <a aria-label="Page 1" href="/page/1">1</a>
  <a rel="prev" aria-label="Page 2" href="/page/2">1</a>
  <!-- .current designates the current page -->
  <span class="current">3</span>
  <!-- rel="next" is added to all links to the next page -->
  <a rel="next" aria-label="Page 4" href="/page/4">4</a>
  <a aria-label="Page 5" href="/page/5">5</a>
  <!-- .next_page is used for final link -->
  <a class="next_page" rel="next" href="/page/4">Next</a>
</div>

When on the first page or last page, the corresponding previous_page or next_page links should be disabled. This is done by changing the <a> tag to a <span> and adding a .disabled class to the element.

  <div role="navigation" aria-label="Pagination" class="pagination" separator=" ">
    <!-- .disabled class grays out element -->
    <span class="previous_page disabled">Previous</span>
    <span class="current">1</span>
    <a rel="next" aria-label="Page 2" href="#page/2">2</a>
    <a aria-label="Page 3" href="#page/3">3</a>
    <a aria-label="Page 4" href="#page/4">4</a>
    <a aria-label="Page 5" href="#page/5">5</a>
    <a class="next_page" rel="next" href="#page/2">Next</a>
  </div>

Pagination can also be used in conjunction with a related link. When this is done, the pagination links are left aligned, and the button is right aligned. This is done by wrapping both the pagination and the button in a <div> with the .pagination-wrapper class.

<!-- .pagination-wrapper used to wrap pagination and related links --->
<div class="pagination-wrapper">
  <div role="navigation" aria-label="Pagination" class="pagination" separator=" ">
  <!-- Pagination links --->
  </div>
  <a href="/archives" class="btn btn-inline"><span class="icon" data-icon="history"></span> View Archive</a>
</div>

CSS Reference

Class Description
.pagination Used for parent div that contain links.
.previous_page Used for initial link. Goes to previous page.
.disabled Used to gray out unnecessary .previous_page or .next_page elements.
.current Designates current page.
.next_page Used for final link. Goes to next page.

Desktop

<div class="nav-search-wrapper">
  <!-- Search form -->
  <form method="get" action="#search_url" id="search-nav-top" class="search-form" role="search" aria-label="Site search">
    <!-- hidden inputs needed for search page
    <input type="hidden" name="as_sitesearch" value="example.nd.edu">
    <input type="hidden" name="entqr" value="3">
    -->
    <!-- Search input -->
    <input type="search" name="q" class="search-input" id="search-input-nav-top" placeholder="Search this site" title="type your search term" aria-label="Site Search input">
    <!-- Search submit -->
    <button class="search-button" type="submit" aria-label="Search"><svg class="icon"><use xlink:href="#icon-search"></use></svg></button>
    <!-- Search toggle -->
    <button class="search-close search-toggle" aria-label="Close Search"><svg class="icon"><use xlink:href="#icon-close"></use></svg></button>
  </form>
</div>

Mobile

The mobile search form is placed in the mobile nav bar. Its markup is identical to the desktop search form with the one exception of the element id. The mobile form uses #search-nav-mobile instead of #search-nav-top.

<!-- Mobile Navbar -->
<div class="nav-mobile-util">
  <!-- ... -->
  <div class="nav-search-wrapper">
    <form method="get" action="#search_url" id="search-nav-mobile" class="search-form" role="search" aria-label="Site search">
    <!-- Same fields as desktop ... -->
    </form>
  </div>
</div>
Class Description
.nav-search-wrapper Wraps the search form.
.search-form Designates the search form.
.search-input Designates the search form.
.search-toggle Button that toggles the search form.
.search-close Button that closes the search form.