Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jade: Change active menu item in parent template

Tags:

html

pug

I have a navigation bar in my parent jade template and I'd like to highlight the item which is currently in view. So if I'm on the blog page,

ul   li Home   li.active Blog   li Contact Us   li About 

Without copying the navigation bar structure into each child template, is there a way to have the parent template see what page it's extending and apply the active class accordingly?

like image 335
Adam Grant Avatar asked Mar 30 '13 14:03

Adam Grant


1 Answers

parent.jade

doctype 5  html   block link     -var selected = 'home'; //default    -var menu = { 'home': '/home', 'blog': '/blog', 'contact': '/contact' };    body     nav       ul         each val, key in menu           li             if selected === key               a.selected(href=val, title=key)= key             else               a(href=val, title=key)= key 

child.jade

extends parent  block link   -var selected = 'blog'; 
like image 121
Pickels Avatar answered Sep 22 '22 06:09

Pickels