Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

Question

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

ExpressJS and EJS are my chosen technologies for creating Views.

When it comes to the navigation bar, I want to add a class="active" to the links that represent the current page. However, if I use partials in my views, how can I achieve this?

Here is a quick example:

Index.ejs

<ul class="nav navbar-nav navbar-right">
        <li><a class="active" href="/Index">Home</a></li>
        <li><a href="/About">About</a></li>
        <li><a href="/Work">Work</a></li>
</ul>

About.ejs

<ul class="nav navbar-nav navbar-right">
        <li><a href="/Index">Home</a></li>
        <li><a class="active" href="/About">About</a></li>
        <li><a href="/Work">Work</a></li>
</ul>

Work.ejs

<ul class="nav navbar-nav navbar-right">
        <li><a href="/Index">Home</a></li>
        <li><a href="/About">About</a></li>
        <li><a class="active" href="/Work">Work</a></li>
</ul>

This is my current method of handling active links in the navbar by including it on each page individually

Is there a more efficient approach where I don't have to render the navbar every time I create a new page?

css node.js twitter-bootstrap express ejs

Answer 1

Answer №1

To make the "active" route value accessible in the partial template, you can pass it as a local variable like this:

<%- include('partial/nav', {active: "About"}); %>

Next, use the active variable to determine the "active" class within the nav partial template:

<ul class="nav navbar-nav navbar-right">
     <li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li>
     <li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li>
     <li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li>
</ul>

For a similar approach, check out this resource

Answer 2

To make the "active" route value accessible in the partial template, you can pass it as a local variable like this:

<%- include('partial/nav', {active: "About"}); %>

Next, use the active variable to determine the "active" class within the nav partial template:

<ul class="nav navbar-nav navbar-right">
     <li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li>
     <li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li>
     <li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li>
</ul>

For a similar approach, check out this resource

Answer 3

Answer №2

To properly load your navigation, follow these steps:

<script>
$("#header").load("header.ejs");
</script>

Next, extract the URL of the current page and determine the active page name. Utilize this function to apply the active class to the current page:

$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});

REMINDER: You must retrieve the page name from the URL using a specific function as it will display the complete page URL.

You only need to create the header.ejs file once and include it on each page.

We hope this guidance proves useful!

Answer 4

To properly load your navigation, follow these steps:

<script>
$("#header").load("header.ejs");
</script>

Next, extract the URL of the current page and determine the active page name. Utilize this function to apply the active class to the current page:

$(document).ready(function($){
var url = window.location.href;
$('.nav li a[href="'+url+'"]').addClass('active');
});

REMINDER: You must retrieve the page name from the URL using a specific function as it will display the complete page URL.

You only need to create the header.ejs file once and include it on each page.

We hope this guidance proves useful!

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

Answer №1

Answer №2

Similar questions

Issue: 'node' is not being recognized when attempting to execute the file using the package.json script

Can you explain the purpose of the 'required' validator in Mongoose?

Troubleshooting problem with Kafka connection when broker is located in a separate Kubernetes namespace

Disconnected WebSocket in Node.js using Socket.io

Exploring the Interaction between Express.js Requests and Mongoose Models

jQuery selector unable to locate the specified class in the table row

Issue with jquery .height(value) function not functioning properly on Internet Explorer

Why does Heroku keep saying it cannot locate the package.json file in my module every time I attempt to do a heroku push?

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

Seeking Assistance with Customizing HTML Uniform Panels

Issues with starting a node application within a screen session using PHP

What is causing fs.readFileSync to not recognize my json document?

What is the process of this script when initiated with an NPM build command?

React application encounters compilation errors following the installation of Express and Cors

implementing node.js and express with nginx using multiple locations

What is the best way to customize the MenuProps of Material UI Select component using createTheme?

Ways to achieve a consistent output in Buffer.from compared to fs.readFile?

What is the best way to configure dotenv for both development and production environments?

Configuring a server-side rendered Angular application on Plesk hosting platform

Retrieving information from a related collection within a parent collection using the populate() method