Reference library

Article number: 300901

Site Navigation

In Sitekit 9.2 and higher there is a new way of implementing Site Navigation, as demonstrated in the two examples below.

Example Horizontal Navigation Bar

<div class="horzNavWrapperOuter">
<div class="horzNavWrapperInner">
<div class="horzNavWrapper">
<sitekit:navigation id="horzNav" class="horzNavInner" includeeditprofile="false" includelogout="false" accesskeystart="A" maxincludedchildlevels="1" />
</div>
</div>
</div>
 

Example Breadcrumb

<div class="breadCrumbWrapper">
<div class="breadCrumbWrapperInner">
<span>You are here</span>
</div>
<sitekit:navigation id="crumbOuter" class="crumbOuter" includesiblings="false" includeancestorsiblings="false" maxincludedchildlevels="0" includeeditprofile="false" includelogout="false" />
</div>
 

Syntax

<sitekit:navigation id="myNav" class="myCSSClass" />
or
<sitekit:navigation id="myNav" class="myCSSClass"></sitekit:navigation>
 

Attributes

Nine attributes can be specified, as listed below.

Attribute Name

 

Type

 

Default Value 

 

Description 

 

 includeancestorsiblings

 

 True/False

 

 True

 

 If “true”, siblings of ancestors to the current page are included in the navigation. 

 includesiblings

 

 True/False

 

 True

 

 If “true”, siblings of the current page are included in the navigation.

 maxincludechildlevels

 

 Integer

 

 1

 

 If “0” then no children of the current page are shown.
If “1” then the children are shown.
If “2” then children and grandchildren are shown

 … etc.

 maxincludedancestorlevels

 

 Integer

 

 100

 

 If “0” then no ancestors are shown.
If “1” then then the Parent is shown.
If “2” then the Parent and Grandparent are shown

.… and so on, up to 100 levels.

 includeeditprofile

 

True/False

 

 True

 

 If “true”, then the user’s profile is shown, if he or she is logged in.

 includelogout

 

 True/False

 

 True

 

 If “true” then a logout link is included in the navigation, if the user is logged in.

 accesskeystart

 

 Single Character

 

 (off)

 

 If no value is specified, then access keys are turned off.

If you enter “H”, for example, then access keys are turned on, starting with the letter H.

 absstartlevel

 

 Integer

 

 0

 

Specifies the absolute level at which the Navigation will start.  No pages above this level will be included in Navigation.

Note  that Level 0 is the root. 

 absendlevel

 

 Integer

 

 100

 

 Specifies the absolute level at which the Navigation will end. No pages below this level will be included in Navigation.

Note that Level 0 is the root.


  

Notes

  1. If maxincludedancestorlevels="0" and includesiblings="true" then maxincludedancestorlevels will be overridden to "1". This allows clean markup to be produced, but means that the parent node of the current page has to be switched off using CSS. 
  2. The 'id' and 'class' specified on the nav block become the 'id' and 'class' of the DIV wrapper around the navigation markup.
  3. The 'id' is also used as the prefix of the 'id' attributes that are added to the LI items, to ensure that no duplicate 'id's are produced when there are multiple navs on the page.
  4. The accesskeystart attribute allows different navs on the same page to be started from a different access key, to prevent multiple navs having the same access keys applied. The supported access keys are A-Z, a-z, 0-9. Once the available keys are exhausted, no more keys will be applied to that nav. Access keys are only applied to ancestors, ancestor-siblings and siblings of the current page.
  5. Each ancestor, ancestor-sibling and sibling LI is given a unique 'id' derived from its position at each level in the nav tree. This is prefixed with the 'id' of the navigation block itself.
  6. The first and last LI inside each UL have a span inserted to indicate first/last item in the list. Where there is only one item in the list, the spans are nested. These are to allow application of corner graphics on pop-out menus.
  7. The active branch is identified by a class SKNavActive on the LI.
  8. The current page is identified by a class SKNavCurrent on the LI.
  9. When edit profile is active a class in added to the edit profile link, SKNavEditProfileActive. The edit-profile and logout links have specific ids and classes to aid styling. 
  10. There is no XML version of this nav included in XML versions of pages.
  11. The markup is output without any newlines, spaces or indentation.

 

 

Related questions