One great way to organize the content of a website where there are so many nodes categorized with taxonomy terms is to create a list of nodes grouped by taxonomy terms. For example, this will be really helpful in an e-commerce website where we have lots of products tagged with a taxonomy term called category. As you read this article, you will see that it is also similar to the index page we have at the end of most books.

In this tutorial we will be creating a page similar to the one shown below:

To achieve this, we will get the idea from the default Glossary view (admin/structure/views/view/glossary) which comes out of the box with the Views module and extend it to fulfill our scenario.
1. Setup your content type and taxonomy vocabulary
For this example, I created a Product content type and taxonomy vocabulary called ‘Categories’. In my Product content type I have a taxonomy reference field named ‘Category’. Finally, I created a few dummy Product nodes to test with.
2. Create a new view
Create a new page view of Taxonomy Terms, we call it All Categories. In the views settings select the taxonomy vocabulary of your choice (‘categories’ in this example). Configure your view as follows:

 

3. Group view results
Since want to group terms on first letter of the term name, we will first create list of term names which shows only the first letter. To create such list, we need to add a second Taxonomy term:name field to our view. In the add field configuration form tick the “Exclude from display” checkbox since we only want to use this field for grouping purpose. Next, under “REWRITE RESULTS” click on “Trim this field to a maximum number of characters” and set maximum character limit to 1. Make sure you uncheck the
Trim only on a word boundary and Add "…" at the end of trimmed text check boxes.

To avoid confusion, you may also need to set a label to this field. Let's call it “Group title”.

Now click on apply.
To group view results using this field, click on settings under Format on your view settings page.

And then select the Group title field as the grouping field and also tick the boxes for Use rendered output to group rows and Remove tags from rendered output.

After applying it the view results are grouped as we see in the preview area:

4. Add contextual filters to view

Next, we want to be able to provide a way so that we can filter view results. For example, I want to see only terms starting from “A” when I provide the filter value in path (I.e. http://localhost/all-categories/a). This is what we can achieve with contextual filters in Views module.
On your view settings page, under Advanced, add a contextual filter Taxonomy term:name and select Display all results for WHEN THE FILTER VALUE IS NOT IN THE URL.

Select Glossary mode under More and set and set character limit to 1.

And now we can test if we attach contixtual filter value to path like http://localhost/all-categories/a then the view’s result will show you only the taxonomy terms which starts from ‘a’.
5. Create an alphabetic navigation
In this step we will add an attachment to the view which will show the first letters as links in a nice sorted form and we will place this attachment at the top of the page view that we have already created.
Add a new Attachment display to the ‘All Categories’ view that you have already created.

In the view’s attachment under Advanced you see that the contextual filter Taxonomy term:name that we have added to the page display is also carried here. Click and edit this filter, and make sure your changes are only for this attachment display.

For When the filter value is not available, choose Display a summary and set the remaining configuration as shown below:

Under When the filter value is available or a default is provided, choose Specify validation criteria. Also set Case to Upper case, and Case in path to Lower case.

Confirm that under More the Glossary mode with character limit 1 is set and click Apply.
Under Attachment settings, set attache to:page and Inherit contextual filters: No.

 

Save you view and visit the view page from the path you have set in the settings (in our example the path is /all-categories). You see that the taxonomy terms are grouped alphabetically with a nice navigator created from the first letters of the term's names.
As a final step we can remove the label ‘Group title’ which we have set for the grouping field in our page view. To remove it, edit you view and on the page display Under Fields click on the field which we have used for grouping. Change All displays to this page and uncheck the Create label. Click Apply and again save your view.