Navigation

Links that help the user navigate back up through the site.


        <ul class="breadcrumb has-backlink">
            <li>
                <a href="#">Service</a>
            </li>
            <li class="backlink">
                <a href="#">Section</a>
            </li>
            <li>
                <span>Current page</span>
            </li>
        </ul>
  

How to use this pattern

Used on every page except the homepage. The breadcrumb should represent where the user is within the site structure, not the journey they took through the site. All page titles in the breadcrumb are links except for the title of the page the user is currently on. The colour of the links should be different from the non-linked text. The links should have a clear rollover colour.

Tags

Short (one to three word) labels linking off to group content


          <ul class="tags ">
            <li class="tags__item">
              <a class="tags__link" href="http://www.jisc.ac.uk">
              Technology
              </a>
            </li>
            <li class="tags__item">
              <a class="tags__link" href="#">
              Services
              </a>
            </li>
            <li class="tags__item">
              <a class="tags__link" href="#">
              A longer description
              </a>
            </li>
          </ul>
  

How to use this pattern

The dark blue variation is to be used on dark backgrounds. White is to be used in the (white) body copy area (eg article tag).

Pagination

Allow users to navigate between multiple pages of search results, or lists of articles.

How to use this pattern

There are 2 variants:

  1. For ≤9 pages of results
  2. For ≥10 pages of results

View examples of both variants

For ≤9 pages of results

Use when there are 9 or less pages of results.


        <div class="pagination pagination--with-pages pagination--with-pages--small-pad pagination--white-bg">
          <ul class="pagination-container">
        
            <li class="pagination__item pagination__item--previous">
              <a href="#" title="Previous">
                <span class="icon icon-chevron-left icon--heavy"></span>
                <span class="pagination__text">Previous</span>
              </a>
            </li>
        
                <li class="pagination__item pagination__item--current pagination__item--first">
                    <span title=" 1">1</span>
                </li>
                <li class="pagination__item">
                    <a href="#" title=" 2">2</a>
                </li>
                <li class="pagination__item">
                    <a href="#" title=" 3">3</a>
                </li>
                <li class="pagination__item pagination__item--last">
                    <a href="#" title=" 4">4</a>
                </li>
        
            <li class="pagination__item pagination__item--next">
              <a href="#" title="Next">
                <span class="pagination__text">Next</span>
                <span class="icon icon-chevron-right icon--heavy"></span>
              </a>
            </li>
        
          </ul>
        </div>
  

For ≥10 pages of results

Use when there are 10 or more pages of results. Note that 10 pages is a special case of this variant.


        <div class="pagination pagination--with-pages pagination--with-pages--small-pad pagination--white-bg">
          <ul class="pagination-container">
        
            <li class="pagination__item pagination__item--previous">
              <a href="#" title="Previous">
                <span class="icon icon-chevron-left icon--heavy"></span>
                <span class="pagination__text">Previous</span>
              </a>
            </li>
        
                <li class="pagination__item pagination__item--first">
                    <a href="#" title=" 1">1</a>
                </li>
                <li class="pagination__item">
                    <a href="#" title=" 2">2</a>
                </li>
                <li class="pagination__item pagination__item--space">&hellip;</li>
                <li class="pagination__item pagination__item--current2">
                    <a href="#" title=" 5">5</a>
                </li>
                <li class="pagination__item pagination__item--current1">
                    <a href="#" title=" 6">6</a>
                </li>
                <li class="pagination__item pagination__item--current">
                    <span title=" 7">7</span>
                </li>
                <li class="pagination__item pagination__item--current1">
                    <a href="#" title=" 8">8</a>
                </li>
                <li class="pagination__item pagination__item--current2">
                    <a href="#" title=" 9">9</a>
                </li>
                <li class="pagination__item pagination__item--space">&hellip;</li>
                <li class="pagination__item">
                    <a href="#" title=" 21">21</a>
                </li>
                <li class="pagination__item pagination__item--last">
                    <a href="#" title=" 22">22</a>
                </li>
        
            <li class="pagination__item pagination__item--next">
              <a href="#" title="Next">
                <span class="pagination__text">Next</span>
                <span class="icon icon-chevron-right icon--heavy"></span>
              </a>
            </li>
        
          </ul>
        </div>
  

A-Z

Allow users to browse between or filter down list items where they are ordered alphabetically eg staff lists.


        <ul class="a-z">
          <li class="a-z__item">
              <a href="#">a</a>
          </li>
          <li class="a-z__item">
              <a href="#">b</a>
          </li>
          <li class="a-z__item">
              <a href="#">c</a>
          </li>
          <li class="a-z__item">
              <a href="#">d</a>
          </li>
          <li class="a-z__item">
              <a href="#">e</a>
          </li>
          <li class="a-z__item">
              <a href="#">f</a>
          </li>
          <li class="a-z__item">
              <a href="#">g</a>
          </li>
          <li class="a-z__item">
              <a href="#">h</a>
          </li>
          <li class="a-z__item">
              i
          </li>
          <li class="a-z__item">
              <a href="#">j</a>
          </li>
          <li class="a-z__item">
              <a href="#">k</a>
          </li>
          <li class="a-z__item">
              <a href="#">l</a>
          </li>
          <li class="a-z__item">
              <a href="#">m</a>
          </li>
          <li class="a-z__item">
              <a href="#">n</a>
          </li>
          <li class="a-z__item">
              o
          </li>
          <li class="a-z__item">
              <a href="#">p</a>
          </li>
          <li class="a-z__item">
              q
          </li>
          <li class="a-z__item">
              <a href="#">r</a>
          </li>
          <li class="a-z__item">
              <a href="#">s</a>
          </li>
          <li class="a-z__item">
              <a href="#">t</a>
          </li>
          <li class="a-z__item">
              <a href="#">u</a>
          </li>
          <li class="a-z__item">
              <a href="#">v</a>
          </li>
          <li class="a-z__item">
              <a href="#">w</a>
          </li>
          <li class="a-z__item">
              x
          </li>
          <li class="a-z__item">
              <a href="#">y</a>
          </li>
          <li class="a-z__item">
              z
          </li>
        </ul>
  

Pager

Used at the bottom of the main body of a page to help users navigate to the next or previous page in a series.

Using the next and previous page titles as link text will make the content more meaningful. As used in multi-page guides on jisc.ac.uk.

Allow users to navigate between pages of related articles.


      <div class="pager">
        <a href="#" title="Previous" class="pager__item pager__item--left">
          <div class="icon icon-chevron-left icon--heavy"></div>
          <div class="pager__text--left">Previous</div>
        </a>
        <a href="#" title="Next" class="pager__item pager__item--right">
          <div class="icon icon-chevron-right icon--heavy"></div>
          <div class="pager__text--right">Next</div>
        </a>
      </div>
    

Pager with next only

Pager with previous only

Notification count

Used within navigation patterns to highlight pending notifications that require the user's action or attention (eg Basket - has 1 item)

Basket 1


        <span>Basket</span>
        <span class="notification-count notification-count--notification">1</span>
  

Show/hide menu

To help a user understand the structure of, and navigate between, a collection of pages that are intended to be read like a book. The menu items should always reflect the structure of the collected pages and can be nested to show a parent / child relationship.

The menu should always be expanded on the root page of a the collection, but collapsed on any subsequent pages. This will help the user understand the structure of the content when they begin, but maximise space for the content on the pages that follow.

Appending a Pager gives users the logical navigation links in the flow of the page. This reduces the need to scroll back to the top and interact with the show/hide menu.

Contents

Washing line

Used as a decorative element to bring visual interest to the page. The marker label defines what type of content the user is looking at (blog post, news item, event etc) - and links the user to the main page for this type (eg News landing page).

View example in a full width region

Demo with single marker

Guide




                  <span class="marker marker--page">Guide</span>
  

Demo with single linked marker





                  <a href="#" class="marker marker--page">Guide</a>
  

Demo with multiple linked markers





                  <a href="#" class="marker marker--page">Marker</a>
                  <a href="#" class="marker marker--page">Example</a>