Results bar

Results bar indicate the number of results in a list and allow a user to sort by their preferred option.

BETA Component

This component has just been released in BETA, please share your feedback with us on the Community.

    <div class="nsw-results-bar">
      <div class="nsw-results-bar__info">Showing results 1 - 10 of 5917 results</div>
    </div>

 

Copy
    <div class="nsw-results-bar">
      <div class="nsw-results-bar__info">Showing results 1 - 10 of 5917 results</div>
      <div class="nsw-results-bar__sorting">
        <label class="nsw-form__label" for="results-sort">Sort by:</label>
        <select class="nsw-form__select" id="results-sort" name="results-sort">
          <option value="3">Relevance</option>
          <option value="3">Most popular</option>
          <option value="3">Most recent</option>
        </select>
      </div>
    </div>

 

Copy
    <div class="nsw-results-bar">
      <div class="nsw-results-bar__info">Sorry, no results found for your search</div>
    </div>

 

Copy

Use results bar to indicate the number of results in a list and allow a user to sort by their preferred option.

Results counter

Update the count each time a search or filter criteria is changed.

Sorting

Allow users to sort the content by the factors that are most important to them. Results should be sorted by the option relevant to the content. Ie. Global search should be sorted by relevance to the searched term or phrase. Where as a News listing would be sorted by date order.

No results

If no results are returned, clearly communicate there are no matching results and allow the user to continue their journey by providing tips to improve or widen their results.

Some ways to do this are by:

  • Suggest alternative keyword if current keyword is not found or a spelling mistake is detected (if possible)
  • Tips to improve or widen the results
  • Contact information or other ways to navigate the site