How to create a menu with a dynamically selected item
This recipe shows you how to have a menu item selected depending on the page that your visitors are currently in.
Setup
This recipe is a snippet that you can copy and paste to a new or an already existing file. It uses the current
object to tell which page is being requested. For example, when the current page equals home
then add the class selected
to this item.
Let’s get started with the HTML structure:
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
Your HTML structure will most likely be different than this one, but you should be able to transfer the same technique to your own HTML.
In the HTML above we have a list of links that go to three different pages. We want to add the selected
class to the home item when the current page is /
, to the about item when the current page is /about
and to the contact item when the current page is /contact
.
To be able to generate dynamic HTML, we need to use an EJS
or a Jade
template. The current
variable is always available in both (EJS and Jade).
The final code will look something like this, if you're using EJS:
<ul>
<li class="<%= current.source=='index'?'selected':'' %>">
<a href="/">Home</a>
</li>
<li class="<%= current.source=='about'?'selected':'' %>">
<a href="/about">About</a>
</li>
<li class="<%= current.source=='contact'?'selected':'' %>">
<a href="/contact">Contact</a>
</li>
</ul>
Now each li
tag has a class attribute that will output selected
if the current.source
variable is in certain page. And, that’s it!
Now, add some styles to your CSS to show the selected
class differently than the other elements without that class:
ul > li.selected {
background: red;
color: white;
border-bottom: purple solid 3px;
}
Have any question about this recipe? Let us know on GitHub!