Tabbed navigation with jade and node.js

I was curious to see if it’s possible to create tabbed navigation and pass current URL parameter to jade from node.js.

It is in fact doable and fairly easy.

In your node.js server, make sure to pass the current URL variable to the your template:

app.get('/users', function(req, res){
  controller.getUsers( function(error, userData){
     res.render('users.jade',{ locals: {

Then, in your jade template, use the conditionals to check for current URL:

          if(currentURL == '/trends/')
            a(href='/trends/').current Trends
            a(href='/trends/') Trends
          if(currentURL == '/users/')
             a(href='/users/').current Users
             a(href='/users/') Users
          if(currentURL == '/seeds/')
             a(href='/seeds/').current Seeds 
             a(href='/seeds/') Seeds

And here’s a bonus CSS to create nice tabs as your top nav:

#nav ul{text-align:left;border-bottom:1px solid #ccc; 
list-style-type:none;padding:10px 10px;}
#nav ul li{display:inline;}
#nav ul li a{font-weight:bold;border:1px solid #ccc; 
text-decoration:none;padding:10px 20px;
#nav ul li a.current{background-color:#fff;
border-bottom:1px solid #fff;}
#nav ul li a:hover{color:#000;background-color:#eee;}

And that should create a nice nav bar looking like this:


2 thoughts on “Tabbed navigation with jade and node.js

    1. Tanya

      Thanks for your comment Aardra. The subject of this post is just to show that you can pass variables from server-side to front-end in node.js, and based on that create a tabbed navigation easily.

      Controller is a class that allows my app to interface with a database, and getUsers is a method that fetches users from a table in my database. To get a better understanding on how to build an application with node.js, please look for tutorials online (sorry I don’t have a full tutorial on my blog yet):

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s