Using tags as dropdown filter


I am running Ghost v2.0 in my local machine,

I would like to create a dropdown filter to filter the posts using tags (see below screenshot), I have the certain filters like Getting Started, Videos, News and I have to list the tags in a dropdown input field and on certain selection the page has to refresh and load the posts according to the selection.


Is there any possibility to do this ?


Yes, it’s possible:

First, create the dropdown:

{{#get 'tags' limit="0" as |tags|}}
    <select id="tag-selector">
        <option>Choose a tag...</option>
    {{#foreach tags}}
        <option value="{{slug}}" data-href="{{url absolute='true'}}">{{name}}</option>

Then, use javascript to redirect the user when they select a tag:

function selectChanged(event) {
    var newLoc = this.selectedOptions[0].dataset.href;
    if (loc) {
        window.location.href = newLoc;

Array.from(document.querySelectorAll('select.tag-selector')).forEach(function (element) {
    element.onchange = selectChanged


Thanks @vikaspotluri123

The above script does not keeps the selected value in the dropdown. But the tags are working fine. Can you please suggest anything is wrong ?

closed #4

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.