Docs > Examples > Listing pages in the same section

First, we need to user the Finder API to retrieve all the pages that we are interested in. To start with, let's just find all the pages in the same section as the current page:

<?js
 var f = new Finder([
   {type: 'page'},
   {section: page.section}
 ]);
?>

We've called this Finder "f", but you can give it whatever name you like. The argument passed to the constructor is an array of filter criteria. The "type" filter is used to restrict the search to finding only pages (rather than, say, images). The "section" filter restricts the query to a specific section. In a template, the current page is available as a global variable named "page", so we can get the current section by looking at "page.section".

Now we can retrieve the results of the query by using the find() method. Each matching page will be returned as a Page in the result ItemSet. We want to format the results as XHTML. Let's loop through, displaying the name of each matching page as a hyperlink on a new line:

<?js
 var result = f.find();
 for (var i=0; i<result.items.length; i++) {
   var p = result.items[i];
   out.write(<a href={p.path}>{p.name}</a>);
   out.write(<br/>);
 }
?>

Often, you will want to apply distinct visual styling to the current page in a navigation list. This can be done by defining an appropriate CSS class. For example, suppose the CSS used by the template contains rules like this:

a { color:#09c;}
a.current {color:black; text-decoration:none;}

Then the loop can be amended to highlight the current page:

<?js 
 var result = f.find();
 for (var i=0; i<result.items.length; i++) {
   var p = result.items[i];
   var c = '';
   if (p.path==page.path) { // the currrent page
     c = 'current';
   }
   out.write(<a href={p.path} class={c}>{p.name}</a>);
   out.write(<br/>);
 }
?>