Symfony 2 - Create sub navigation

Symfony 2 - Create sub navigation

For most of today I've been wracking my brain trying to work out how to
create a sub-nav using symfony2 and Doctrine. Yet I can't figure it out at
all.
public function navAction($sector)
{
$em = $this->getDoctrine()->getManager();
$query = $em->createQuery(
"SELECT p.pageParent, p.pageName, p.pageUrl, p.pageSector
FROM StyleGuideBundle:pages p
WHERE p.pageSector LIKE '%$sector%'
AND p.pageType = 2"
);
$navItems = $query->getResult();
if (!$navItems) throw $this->createNotFoundException('Unable to find
any pages under this category');
return $this->render(
'StyleGuideBundle:Partial:peNav.html.twig',
array(
'navItems' => $navItems,
'sector' => $sector
)
);
}
This is the controller to generate a navigation. I have it outputting in
peNav.html.twig which looks like this:
<nav class="peNav js-nav">
<ul>
{% for nav in navItems %}
<li>
<a title="{{ nav.pageName }}" href="{{ path('style_guide_pages_show',
{'pageUrl': nav.pageUrl, 'sector': sector}) }}">{{ nav.pageName
}}</a>
</li>
{% endfor %}
</ul>
and outputs this list:
<ul>
<li><a title="Text Elements" href="/business/text-elements">Text
Elements</a></li>
<li><a title="Buttons" href="/business/buttons">Buttons</a></li>
<li><a title="Forms" href="/business/forms">Forms</a></li>
<li><a title="Lists" href="/business/lists">Lists</a></li>
<li><a title="Tables" href="/business/tables">Tables</a></li>
<li><a title="Search Box" href="/business/search-box">Search Box</a></li>
<li><a title="Pods" href="/app_dev.php/business/pods">Pods</a></li>
<li><a title="Text Elements" href="/business/text-elements">Text
Elements</a></li>
</ul>
As you can see, 'Text Elements' is rendered twice as there are two content
sections under this page. What I want is a list which looks like this:
<ul>
<li><a title="Text Elements" href="/business/text-elements">Text
Elements</a>
<ul>
<li><a title="Paragraphs"
href="/business/text-elements/paragraphs">Paragraphs</a></li>
<li><a title="Links"
href="/business/text-elements/links">Links</a></li>
</ul>
</li>
<li><a title="Buttons" href="/business/buttons">Buttons</a></li>
<li><a title="Forms" href="/business/forms">Forms</a></li>
<li><a title="Lists" href="/business/lists">Lists</a></li>
<li><a title="Tables" href="/business/tables">Tables</a></li>
<li><a title="Search Box" href="/business/search-box">Search Box</a></li>
<li><a title="Pods" href="/app_dev.php/business/pods">Pods</a></li>
<li><a title="Text Elements" href="/business/text-elements">Text
Elements</a></li>
</ul>
'Paragraphs' and 'Links' are both sub sections underneath 'Text Elements'.
Does anyone know how I can do this please?
Thanks in advance.