This software is free of charge. However, you can always make a donation. Thank you!

Page Navigation With Titles

This small plugin is an enhancement of the Joomla! navigation plugin. It replaces the previous/next navigation links by the titles of the corresponding articles.

pagenavigationtitles

pagenavigationtitles on github.

Plugin Parameters

  • Turn on/off the left and right arrows (<,>)
  • Position of the navigation bar can be set to above, below or both
  • Configurable texts in front of the links

Download

 FileNotes
Joomla 3.x
Joomla 2.5
Joomla 1.7
Joomla 1.6
pagenavigationtitles.zip Version 1.7, 2014/10/03, Joomla! 3.x, 2.5, 1.7, 1.6
compat 15 native  pagenavigationtitles_15.zip Version 1.3, 2011/03/03, Joomla! 1.5

HTML Markup And css Styling

The navigation's HTML markup is built in the same way as the native Joomla navigation. The names of the css classes can be configured and are predefined for Joomla 2.5 so its styling should work right out-of-the box with your template. The pretexts in front of the links can be styled separately. The following markup and css classes are used:

Joomla 1.6, 1,7, 2.5, 3.x

<ul class="pagenav">
  <li class="pagenav-prev">
    left-arrow 
    <span class="pagenav-prev-pretext">pre-text (prev)</span>
    <a>prev link</a>
  </li>
  <li class="pagenav-next">
    <span class="pagenav-next-pretext">pre-text (next)</span>
    <a>next link</a>
    right-arrow
  </li>
</ul>
css Example
ul.pagenav, ul.pagenav li {
  list-style: none; list-style-type:none; list-style-image: none;
  margin:0; padding:0; border: 0;
  overflow: hidden;
  width: 100%;
}
ul.pagenav {
  border-top:1px solid #606060;
  border-bottom:1px solid #606060;
  clear: both;
}
ul.pagenav li.pagenav-prev { float: left; width:auto; }
ul.pagenav li.pagenav-next { float: right; width:auto; }

Joomla 1.5

<table align="center" class="pagenav">
  <tr>
    <th class="pagenav_prev">
      <span class="pagenav_prev_pretext">pre-text</span></th>
      <a>prev link</a>
    </th>
    <th class="pagenav_next">
      <span class="pagenav_next_pretext">pre-text</span></th>
      <a>next link</a>
    </th>
  </tr>
</table>