Edit this page

<navigation>

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.

Parameters

  • default

Attributes

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

Example

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

<def tag="sub-nav">
  <navigation merge>
    <nav-item>Red</nav-item>
    <nav-item>Green</nav-item>
    <nav-item>Blue</nav-item>
  </navigation>
</def>

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

Related Tags


Edit this page