DocsUpdated 18 Oct 2026

Menu with active class (hash)

Example of how to create a Bootstrap navbar with an active class based on the current page URL (request.url). Useful for highlighting the currently active navigation link in your menu.

Bootstrap static «menu.hash» example

This snippet shows a common pattern for server-side menu highlighting. It reads the current page URL and compares it against each menu link - if they match, an active class is added to the corresponding <li> element, giving the user a visual indicator of where they are.

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#"><img src="img/logo.png" alt="Logo" description="Company name" /></a>
        <div class="nav-collapse collapse">
          <ul class="nav pull-right">
            #var fpath = request.url.toLowerCase()#
            <li class="#if(fpath == '/') {#active#}#"><a href="/">Home</a></li>
            <li class="#if(fpath == '/about') {#active#}#"><a href="/about">About</a></li>
            <li class="#if(fpath == '/services') {#active#}#"><a href="/services">Services</a></li>
            <li class="#if(fpath == '/projects') {#active#}#"><a href="/projects">Projects</a></li>
            <li class="#if(fpath == '/contact') {#active#}#"><a href="/contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Use request.url: the path the visitor requested, without file extension and URL-encoded (spaces become hyphens). request.filepath does not work here, because it includes the file extension (/about.hash).