Navigation

This is one of the most important components for all websites and applications. Without good navigation the content cannot be discovered by the user, nor the user will be able to navigate between your pages with ease. WFP UI offers several navigation patterns, depending on the use case.

This menu is very versatile and can use groups. You can use this menu to create blocks of links, i.e.: for the sidebar.

Notice

  • Menus can be displayed without surrounding borders, using wfp-menu-plain class instead of wfp-menu.
  • Menu headings can be also displayed as a link, using a.menu--link element instead of span.menu--item.
  • To highlight active menu items, add current class to a.menu--link nodes.
Preview
Markup
<nav class="wfp-menu">
  <div class="menu--group">
    <h6 class="menu--heading"><span class="menu--item">About</span></h6>
    <ul class="menu--wrapper">
      <li class="menu--item"><a href="#" class="menu--link current">Executive Director</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Senior Leadership</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Corporate Information</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Funding</a></li>
    </ul>
  </div>
</nav>

Inline Menu

The same menu as in previous example, but used together with grids, to create more complex designs, such as horizontal groups of links for the footer.

Notice

This menu can be displayed without surrounding borders by using wfp-menu-plain class, instead of wfp-menu.

Preview
Markup
<nav class="wfp-menu wfp-grid">
  <div class="menu--group wfp-u-1 wfp-u-md-1-3">
    <h6 class="menu--heading"><span class="menu--item">Our Programmes</span></h6>
    <ul class="menu--wrapper">
      <li class="menu--item"><a href="#" class="menu--link">Cash and Vouchers</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Foods for Assets</a></li>
      <li class="menu--item"><a href="#" class="menu--link current">HIV / AIDS</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Purchase for Progress</a></li>
    </ul>
  </div>
  <div class="menu--group wfp-u-1 wfp-u-md-1-3">
    <h6 class="menu--heading"><span class="menu--item">Our Expertise</span></h6>
    <ul class="menu--wrapper">
      <li class="menu--item"><a href="#" class="menu--link">Preparedness: Being Ready</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Responding to Emergencies</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Food Security Analysis</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Buying the Food</a></li>
    </ul>
  </div>
  <div class="menu--group wfp-u-1 wfp-u-md-1-3">
    <h6 class="menu--heading"><span class="menu--item">Our Operations</span></h6>
    <ul class="menu--wrapper">
      <li class="menu--item"><a href="#" class="menu--link">Current Emergencies</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Emergency Operations</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Relief & Recovery Operations</a></li>
      <li class="menu--item"><a href="#" class="menu--link">Special Operations</a></li>
    </ul>
  </div>
</nav>

Segmented Controls

This pattern is useful for when you need to display a set of controls with an indicated active state, or a group of links related to each other.

Preview
Markup
<ul class="wfp-seg-control">
  <li class="seg-control--item">
    <a class="seg-control--link" href="#">Home</a>
  </li>
  <li class="seg-control--item">
    <a class="seg-control--link active" href="#">Blog</a>
  </li>
  <li class="seg-control--item">
    <a class="seg-control--link" href="#">About us</a>
  </li>
  <li class="seg-control--item">
    <a class="seg-control--link" href="#">Contact us</a>
  </li>
</ul>

Breadcrumbs are a special kind of segmented control component; a simple and minimal way to give users a hint at your site or application’s structure. They also provide an important context in relation to user’s current location within your content. Breadcrumbs should be displayed just below the header, possibly on their own, with appropriate spacing to stay visible.

You can use a dark variant of breadcrumbs, by replacing class wfp-breadcrumbs with wfp-breadcrumbs--dark. Dark breadcrumbs should only ever be used against unpredictable backgrounds, such as splash screens, etc.

Preview
Markup
<nav class="wfp-breadcrumbs">
  <ol class="breadcrumbs--wrapper">
    <li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-dark xsmall"></span><span>Home</span></a></li>
    <li class="breadcrumbs--item"><a href="#email" class="breadcrumbs--link">Careers</a></li>
    <li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
  </ol>
</nav>
Preview
Markup
<nav class="wfp-breadcrumbs--dark">
  <ol class="breadcrumbs--wrapper">
    <li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-light xsmall"></span><span>Home</span></a></li>
    <li class="breadcrumbs--item"><a href="#email" class="breadcrumbs--link">Careers</a></li>
    <li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
  </ol>
</nav>

TIP

Breacrumbs use the home icon from the WFP UI icon set. See the User Interface icons page for more information.

Pagination

Pagination is very useful pattern that allows users to browse through available content when it is grouped into manageable chunks: pages. You can use any size available for the buttons.

Preview
  1. Previous
  2. 1
  3. 2
  4. 3
  5. …
  6. Next
Markup
<div class="wfp-pagination">
  <ol class="pagination--wrapper">
    <li class="pagination--item">
      <a href="#" class="pagination--btn">Previous</a>
    </li>
    <li class="pagination--item active">
      <span class="pagination--btn">1</span>
    </li>
    <li class="pagination--item">
      <a href="#" class="pagination--btn">2</a>
    </li>
    <li class="pagination--item">
      <a href="#" class="pagination--btn">3</a>
    </li>
    <li class="pagination--item ellipsis">
      <span class="pagination--btn ">&hellip;</span>
    </li>
    <li class="pagination--item">
      <a href="#" class="pagination--btn">Next</a>
    </li>
  </ol>
</div>