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: {
   	users:userData,
   	currentURL:'/users/' 
        }
     });
  });
});

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

div#nav
      ul
        li 
          if(currentURL == '/trends/')
            a(href='/trends/').current Trends
          else
            a(href='/trends/') Trends
        li
          if(currentURL == '/users/')
             a(href='/users/').current Users
          else
             a(href='/users/') Users
        li
          if(currentURL == '/seeds/')
             a(href='/seeds/').current Seeds 
          else
             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;
border-bottom:none;margin-right:5px;
margin-bottom:1px;background-color:#eee}
#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:

Advertisements

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): http://shapeshed.com/creating-a-basic-site-with-node-and-express/
      http://net.tutsplus.com/tutorials/javascript-ajax/node-js-for-beginners/

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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