title: How to sort items to display by using Bootstrap's Dropdown menu
body: <p>I have an app that displays recipes on the index page (mywebsite.com/recipes). I want to sort them either by date or by popularity, and have a button directly on the page so the user can choose how he wants to sort the recipes. I am using bootstrap's dropdown menu, which uses anchor tags (would a select menu be better suited?). </p>
  
  <p>Here's the dropdown menu: </p>
  
  <pre><code>&lt;div class="dropdown indexDropdown"&gt;
  &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
        Sort by
        &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
        &lt;li&gt;&lt;a href="#(WHAT SHOULD I PUT HERE)"&gt;Most recent&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#(WHAT SHOULD I PUT HERE)"&gt;Most popular&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here's the route I want to use when "Date" is chosen or when nothing is clicked by the user (default sort):</p>
  
  <pre><code>//INDEX ROUTE (SORT BY DATE)
  router.get("/WHAT SHOULD I PUT HERE", function(req, res){
      if(req.query.search &amp;&amp; req.xhr) {
         const regex = new RegExp(escapeRegex(req.query.search), 'gi');
         // Get all recipes from DB
         Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
            if(err){
               console.log(err);
            } else {
               res.status(200).json(foundRecipes);
            }
         });
     } else {
         // Get all recipes from DB if no search input
         Recipe.find({}).sort({"createdAt": -1}).limit(9).exec(function(err, foundRecipes){
            if(err){
                console.log(err);
            } else {
               if(req.xhr) {
                 res.json(foundRecipes);
               } else {
                 res.render("recipes/index",{recipes: foundRecipes});
               }
            }
         });
     }
  });
  </code></pre>
  
  <p>Here's the route I want to use when "Popularity" is chosen or when nothing is clicked by the user (default sort):</p>
  
  <pre><code>//INDEX ROUTE (SORT BY POPULARITY)
  
      router.get("/WHAT SHOULD I PUT HERE", function(req, res){
          if(req.query.search &amp;&amp; req.xhr) {
             const regex = new RegExp(escapeRegex(req.query.search), 'gi');
             // Get all recipes from DB
             Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
                if(err){
                   console.log(err);
                } else {
                   res.status(200).json(foundRecipes);
                }
             });
         } else {
             // Get all recipes from DB if no search input
             Recipe.find({}).sort({"numberOfPins": -1}).limit(9).exec(function(err, foundRecipes){
                if(err){
                    console.log(err);
                } else {
                   if(req.xhr) {
                     res.json(foundRecipes);
                   } else {
                     res.render("recipes/index",{recipes: foundRecipes});
                   }
                }
             });
         }
      });
  </code></pre>
  
  <p>How should I do this? What href should I assign to each anchor tag in the dropdown menu? Should I just add something like href="/recipes?_sort=POPULARITY"?</p>
  
  <p>Thanks a lot!</p>