skip to primary navigationskip to content

Adding an a-z selector bar to a page, or on multiple linked collections

Introduction and preparation

There is a block of code that may be used to add a selector bar to a page, as is used on the A-Z on the page - to add the code you need to be in the html view of the page. You may find it easier to alter the code to suit in a text editor and then paste it into the html view of a page.

The code will cause the following block to be created:



First, in order to use it you need to allow the select, label and option tags to be used on the site, which you do by going to Site setup > HTML filtering, selecting the tags and clicking on 'Remove selected tags' and saving. If you don't do this those tags will be stripped from the code block and the mobile view of the A-Z bar will not work.

Adding the code for the bar to a page

A-Z to links in a page

The code that is used to create the A-Z bar for links within a page, assuming that each block of entries is preceded by an anchor #a, #b etc, is as follows:

<div class="az-list">
<ul><li><a href="#a">A <span class="campl-list-indicator"></span></a></li>
<li><a href="#b">B <span class="campl-list-indicator"></span></a></li>
<li><a href="#c">C <span class="campl-list-indicator"></span></a></li>
<li><a href="#d">D <span class="campl-list-indicator"></span></a></li>
<li><a href="#e">E <span class="campl-list-indicator"></span></a></li>
<li><a href="#f">F <span class="campl-list-indicator"></span></a></li>
<li><a href="#g">G <span class="campl-list-indicator"></span></a></li>
<li><a href="#h">H <span class="campl-list-indicator"></span></a></li>
<li><a href="#i">I <span class="campl-list-indicator"></span></a></li>
<li><a href="#j">J <span class="campl-list-indicator"></span></a></li>
<li><a href="#k">K <span class="campl-list-indicator"></span></a></li>
<li><a href="#l">L <span class="campl-list-indicator"></span></a></li>
<li><a href="#m">M <span class="campl-list-indicator"></span></a></li>
<li><a href="#n">N <span class="campl-list-indicator"></span></a></li>
<li><a href="#o">O <span class="campl-list-indicator"></span></a></li>
<li><a href="#p">P <span class="campl-list-indicator"></span></a></li>
<li><a href="#q">Q <span class="campl-list-indicator"></span></a></li>
<li><a href="#r">R <span class="campl-list-indicator"></span></a></li>
<li><a href="#s">S <span class="campl-list-indicator"></span></a></li>
<li><a href="#t">T <span class="campl-list-indicator"></span></a></li>
<li><a href="#u">U <span class="campl-list-indicator"></span></a></li>
<li><a href="#v">V <span class="campl-list-indicator"></span></a></li>
<li><a href="#w">W <span class="campl-list-indicator"></span></a></li>
<li><a href="#x">X <span class="campl-list-indicator"></span></a></li>
<li><a href="#y">Y <span class="campl-list-indicator"></span></a></li>
<li><a href="#z">Z <span class="campl-list-indicator"></span></a></li>
<div class="campl-mobile-list-layout"><label class="hidden" for="navigation-select">Select</label> <select id="navigation-select"><option value="">please select</option>
<option value="#a">A</option>
<option value="#b">B</option>
<option value="#c">C</option>
<option value="#d">D</option>
<option value="#e">E</option>
<option value="#f">F</option>
<option value="#g">G</option>
<option value="#h">H</option>
<option value="#i">I</option>
<option value="#j">J</option>
<option value="#k">K</option>
<option value="#l">L</option>
<option value="#m">M</option>
<option value="#n">N</option>
<option value="#o">O</option>
<option value="#p">P</option>
<option value="#q">Q</option>
<option value="#r">R</option>
<option value="#s">S</option>
<option value="#t">T</option>
<option value="#u">U</option>
<option value="#v">V</option>
<option value="#w">W</option>
<option value="#x">X</option>
<option value="#y">Y</option>
<option value="#z">Z</option></select></div>

The second block of code creates the mobile version of the bar, which looks like this:

In this example the bar is on a page and all the links are to anchors within the page.

A-Z to collections in the same folder

An A-Z such as this can be useful in a large research directory, such as

  • Here you create a collection for each letter of the alphabet (having tagged each profile in the directory by the first letter of their family name). Remember to use 'Collection (old-style)' as you are interacting with the directory. The collection should be configured to give a table showing Title and Specialities (and email if you wish) and to give the results ordered on Full Name. Follow a pattern for naming these collections (see below).
  • Into each of these collections you add the code for the bar to the body section of the collection, having created links between the collections linked to on the bar by modifying the 'href=""' on each letter - use a predictable pattern and the links can all be added and the code for the complete bar pasted into each collection.
  • You will also want to add the triangular marker for the letter that is in use - this is done by adding "class="selected" " to the link on the active letter as on the letter 'a' on the collection page for that letter :


  • This is the code you will need for a set of collections for letters of the alphabet, given that you have given them short names in the pattern 'collection-a'. You will need to give titles that are more descriptive, for example 'Member directory: A':
<div class="az-list">
<ul><li><a class="selected" href="../collection-a">A <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-b">B <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-c">C <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-d">D <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-e">E <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-f">F <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-g">G <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-h">H <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-i">I <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-j">J <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-k">K <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-l">L <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-m">M <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-n">N <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-o">O <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-p">P <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-q">Q <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-r">R <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-s">S <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-t">T <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-u">U <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-v">V <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-w">W <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-x">X <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-y">Y <span class="campl-list-indicator"></span></a></li>
<li><a href="../collection-z">Z <span class="campl-list-indicator"></span></a></li>
<div class="campl-mobile-list-layout"><label class="hidden" for="navigation-select">Select</label> <select id="navigation-select"><option value="">please select</option>
<option value="../collection-a">A</option>
<option value="../collection-b">B</option>
<option value="../collection-c">C</option>
<option value="../collection-d">D</option>
<option value="../collection-e">E</option>
<option value="../collection-f">F</option>
<option value="../collection-g">G</option>
<option value="../collection-h">H</option>
<option value="../collection-i">I</option>
<option value="../collection-j">J</option>
<option value="../collection-k">K</option>
<option value="../collection-l">L</option>
<option value="../collection-m">M</option>
<option value="../collection-n">N</option>
<option value="../collection-o">O</option>
<option value="../collection-p">P</option>
<option value="../collection-q">Q</option>
<option value="../collection-r">R</option>
<option value="../collection-s">S</option>
<option value="../collection-t">T</option>
<option value="../collection-u">U</option>
<option value="../collection-v">V</option>
<option value="../collection-w">W</option>
<option value="../collection-x">X</option>
<option value="../collection-y">Y</option>
<option value="../collection-z">Z</option></select></div>
  • Once you have the A-Z collections assembled and working you may want to go through them and exclude them all from the navigation so they are not visible in the left-hand column.
  • If you have an introductory page leading to the collections displaying your A-Z tables, you will need to paste in the A-Z code and then go through and remove the "../" at the start of each link as it will not be required.