Hobo Cookbook

View Source



General purpose navigation bar. Renders a <ul class="navigation">. This tag is intended to be used in conunction with <nav-item>. The main feature of this pair of tags (over, say, just using a plain <ul> list), is that it’s easy to have a ‘current’ CSS class added to the appropriate nav item (so you can highlight the page/section the user is)

The main navigation in the default hobo app is implemented with <navigation> but this tag is also appropriate for any sub-navigation.


  • default


  • current - the textual content of the nav item that should have the ‘current’ CSS class added (see example)


The normal usage is to define your own navigation tag that calls <navigation>.

<def tag="sub-nav">
  <navigation merge>

Then in your pages you can call the tag like this

  • On the ‘red’ page: <sub-nav current="red"/>
  • On the ‘green’ page: <sub-nav current="green"/>
  • and so on.

Show Source


No Comments to display