Have Geek Brain

Best way to manage header navigation menu from template?

I am looking to put navigation in my GSP template and I would like to set a class active

for navigation elements for each respective page. What's the best way to do this? I have multiple views .gsp

combined with one template that looks like this:

  <div id="bd" role="main">
    <div role="navigation" class="yui-g">
      <ul id="nav"><a href="index.gsp"><li class="active">Home</li></a><a href = "products.gsp"><li>Products</li></a><a href = "contacts.gsp"><li>Contact</li></a></ul>
    </div>
    <g:layoutBody/>
  </div>
+2


a source to share


5 answers


I like armandino's suggestion, however you may have problems if you access the pages in other ways than by clicking on the menu (for example, via a bookmark or the first page after logging in).

This is a different solution if you are using SiteMesh, however it is not isolated from the menu template and therefore not as good in design:



Grails active page navigation menu

+1


a source


Instead of passing a parameter, you can use some of those present:

<g:set var="pageId" value="${params.controller}-${params.action}"/>


Then on the nav elements

<g:if test="${pageId == 'book-list'}"> class="active"</g:if>
+3


a source


This is usually done by passing in a parameter, let's call it activeView

. Then in your menu template you can check which menu item to highlight based on the parameter value:

<g:if test="${activeView == 'products'}">
   <li class="menuItem active">Products</li><!-- not clickable if active -->
</g:if>
<g:else>
   <li class="menuItem"><a href="products.gsp?activeView=products">Products</a></li>
</g:else>

I would also suggest having controllers as entry point rather than GSP.

  <g:link controller="products" action="list" class="menuItem" params="[activeView:'products']">Book List</g:link>
+2


a source


Another idea is to use the Grails navigation plugin .

+1


a source


I think the sitemesh pageProperty is elegant in a non-invasive solution that keeps things completely in sight.

on a specific page:

<body active="home">

in your sitemesh layout template:

<g:if test="${pageProperty(name: 'body.active') == 'home'}">
    <li class="active"><g:link uri="/">Home</g:link></li>
</g:if>
<g:else>
    <li><g:link uri="/">Home</g:link></li>
</g:else>
0


a source






More articles:


All Articles