%META:TOPICINFO{author="ProjectContributor" date="1231502400" format="1.1" version="1"}%
%META:TOPICPARENT{name="WebHome"}%
---+!! Hierarchical Navigation

*Navigation block that displays the current topic, its parent and children (if any).* %BR%
This is intended to be included in other topics, for example in a side navigation bar (!WebLeftBar).

_NOTE: The lookup for parent and children will increase the loading time of your pages._

%TOC%

---++ Usage
Two sections are defined:
   * =all=
   * =children=
   
---+++ Displaying the Parent - Current - Children block
<blockquote>
<verbatim class="tml">
%INCLUDE{"%SYSTEMWEB%.HierarchicalNavigation" section="all"}%
</verbatim>
</blockquote>
generates:

%INCLUDE{"%SYSTEMWEB%.HierarchicalNavigation" section="all"}%


When included in !WebLeftBar (using default PatternSkin) this is styled to:

<div id="patternSideBarContents">
%INCLUDE{"%SYSTEMWEB%.HierarchicalNavigation" section="all"}%
</div>

---+++ Displaying child topics
<blockquote>
<verbatim class="tml">
*Child topics:*
%INCLUDE{"%SYSTEMWEB%.HierarchicalNavigation" section="children"}%
</verbatim>
</blockquote>
generates:

*Child topics:*
%INCLUDE{"%SYSTEMWEB%.HierarchicalNavigation" section="children"}%

When included in !WebLeftBar (using default Pattern skin) this is styled to:

<div id="patternSideBarContents">
%INCLUDE{"%SYSTEMWEB%.HierarchicalNavigation" section="children"}%
</div>

<verbatim style="display:none;">
%STARTSECTION{"all"}%<div class="foswikiHierarchicalNavigation">
<ul>
%SEARCH{
   "parent"
   type="query"
   topic="%BASETOPIC%"
   web="%BASEWEB%"
   nonoise="on"
   format="<li class='foswikiParentTopic'>$percentICON{parent_gray}$percent [[$web.$parent][$parent]]</li>"
}%
<li class='foswikiCurrentTopic' style='font-weight:bold;'><nop>%BASETOPIC%</li>%INCLUDE{"%TOPIC%" section="childlist"}%
</ul>
</div><!--/foswikiHierarchicalNavigation-->%ENDSECTION{"all"}%

%STARTSECTION{"children"}%<div class="foswikiHierarchicalNavigation">
<ul>%INCLUDE{"%TOPIC%" section="childlist"}%</ul>
</div><!--/foswikiHierarchicalNavigation-->%ENDSECTION{"children"}%

%STARTSECTION{"childlist"}%%SEARCH{
   "parent.name='%BASETOPIC%'"
   web="%BASEWEB%"
   type="query"
   nonoise="on"
   format="<li class='childTopic'>$percentICON{line_ur_gray}$percent [[$web.$topic][$topic]]</li>"
}%%ENDSECTION{"childlist"}%
</verbatim>
<!-- %JQREQUIRE{"chili"}% -->
