%META:TOPICINFO{author="TWikiContributor" date="1164471667" 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>
%INCLUDE{"%TWIKIWEB%.HierarchicalNavigation" section="all"}%
</verbatim>
</blockquote>
generates:

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


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

<div id="patternLeftBarContents">
%INCLUDE{"%TWIKIWEB%.HierarchicalNavigation" section="all"}%
</div>

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

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


<div style="display:none;">
%STARTSECTION{name="all"}%<div class="twikiHierarchicalNavigation"><div class="twikiParentTopic">
%SEARCH{ "^%BASETOPIC%$" web="%BASEWEB%" scope="topic" type="regex" nonoise="on" format="$percntIF{$quot$parent$quot then=$quot   * [[$web.$parent][$parent]]$quot else=$quot<nop>$quot}$percnt" }%<nop>
</div>
<div class="twikiCurrentTopic">
   * <nop>%BASETOPIC%
</div>
<div class="twikiChildTopics">
%METASEARCH{type="parent" topic="%BASETOPIC%" format="   * [[$web.$topic][$topic]]"}%<nop>
</div><!--twikiChildTopics--></div><!--/twikiHierarchicalNavigation-->%ENDSECTION{name="all"}%

%STARTSECTION{name="children"}%<div class="twikiHierarchicalNavigation">
<div class="twikiChildTopics">
%METASEARCH{type="parent" topic="%BASETOPIC%" format="   * [[$web.$topic][$topic]]"}%<nop>
</div><!--twikiChildTopics--></div><!--/twikiHierarchicalNavigation-->%ENDSECTION{name="children"}%

</div>