Post Article Navigation

Dynamic navigation which is populated with post articles.

This article explains how to create dynamic navigation which is automatically populated by post articles. This can be useful for creating small sidebar menus of recent posts, or footer navigation which lists post article titles.

How it Works

The navigation will be populated with the titles of all post articles of a certain post category. The <data:repeater> will be used to retrieve the post articles, with the data source being set to a call to the Oncord API. The <data:repeater> is similar to a for loop which will repeat everything inside the tag until there are no more items left to return from a data source.  

Basic Implementation

  • Navigation code
  • Preview
  • CSS styling
<div class="sideBar"> <h4 class="title"><a href="/blog/">Blog</a></h4> <ul> <data:repeater as="post" datalimit="4" datasource="\Components\Website\Posts::getAllForCategory(1)"> <li><a href="[? $post['post_content_url'] ?]">[? $post['post_title'] ?]</a></li> </data:repeater> </ul> </div>

The Data Repeater

The data repeater specified above uses the following attributes, for a list of all attributes please see the API here.

as="post" - This attribute determines the name of the variable to be registered for the repeating element. In this case the variable has been given the name "post" and is therefore referenced as $post.

datalimit="4" - This attribute defines the maximum number of rows the data repeater will return. In this case it was decided that there needed to be a maximum of four articles displayed.

datasource="\Components\Website\Posts::getAllForCategory(1)" - This attribute defines the data source of the repeater. In this example all articles where the category id=1 will be returned. To find a post category id navigate to the post categories page of the dashboard, then click a category to open the category edit page. On this page there is a tab labelled "Developer Info", which lists the post category ID.

<div class="sideBar"> <logic:variable as="categoryName" value="[? \Components\Website\Posts\Categories::get(1) ?]" /> <h4 class="title"><a href="[? $categoryName['page_id'] ?]">[? $categoryName['post_category_title'] ?]</a></h4> <ul> <data:repeater as="post" datalimit="4" datasource="\Components\Website\Posts::getAllForCategory(1)"> <li><a href="[? $post['post_content_url'] ?]">[? $post['post_title'] ?]</a></li> </data:repeater> </ul> </div>