Navigation types
Historically there have been a total of 6 Navigation Types supported by Sitekit CMS. Types 1-4 are still usable on old sites, but they are no longer recommended or supported for new sites, since navigation Types 5 and 6 offer far superior capabilities.
The description below is confined to Types 5 and 6 only, and should not be used in conjunction with types 1-4 navigation.
Which Type should I use?
Although there are occasional exceptions, type 5 navigation is best used for either single level navigation blocks (e.g. a horizontal, top-level navigation) or for both simple drop-down and more complex pop-out navigation designs.
While the type 6 can also be used for these it is most commonly used for multi-level vertical navigation blocks showing all levels from (for example) 2-4 and expanding as a user navigates deeper into the site structure. This is only one way of configuring the type 6 as it can also be used to consistently show the pages a level lower that the current level – for example if a user is on a level 2 page then the navigation would show level 3.
Type 5 Navigation
The following table describes the different elements, and their configurations. An example of the individual configurations is provided below the table.
XML Element |
Description |
Values |
Required? |
Default |
<NAVIGATION>
|
Root XML element, encloses entire navigation configuration |
n/a |
Compulsory |
n/a |
<STARTLOCID>
|
Locid of root page for navigation with this layout |
String |
Compulsory |
n/a |
<LEVEL>
|
Level of navigation (in tree) which navigational element displays |
Integer |
Optional |
0 |
<ENDLEVEL>
|
End Level of navigation (in tree) which navigational element displays. E.g. if level=2 and endlevel=2 then only level 2 shows, if level=2 and endlevel=3 then levels 2 and 3 show |
Integer |
Optional |
0 |
<ID>
|
For Type 5 Accessible Popout – if you want to specify an ID for the div enclosing the menu block. Normally the id of the menublock is "menu" – any value here will be appended. E.g. if you enter "Main" then you will get div id="menuMain". |
String |
Optional |
Blank |
<MENUITEMIDS>
|
For TYPE 5 Accessible Popout – if you want a unique id for each item in the menu then (li id=""SKType5navlist_1"", li id=""SKType5navlist_2"" etc |
0,1 |
Optional |
0 |
<SELECTEDACTIVE>
|
Whether to make the selected page (at this level) an active link. 1-true. 0= false. Useful if there are several navigation XML sniplets (like hie.co.uk) and the parent and grandparent menu elements of a page which may be on separate navigation XML snipplets to be links |
Integer |
Optional |
0 |
<NOLOGOUTLINK>
|
Whether or not to show a logout link (if a user is |
0,1 |
Optional |
0 |
<NOEDITPROFILE>
|
Whether or not to show an "Edit Profile" link (if a user is |
0,1 |
Optional |
0 |
<ALLOWCHILDLEVEL>
|
Used in conjunction with level and startlocid both being used. The allowchildlevel flag means that even if the selected page is the grandparent or above the startlocid then the level below the defined startlocid will show |
Integer |
Optional |
0 |
<DOMAIN>
|
Prefixes all links in Navigation with the specified domain. This is useful, for example, where pages in a sub-web need to include a Navigation Menu that links to the parent domain instead of the sub-domain. |
String |
Optional |
Links point at the current domain. |
<DOMAINSTARTPAGELINK>
|
Includes a link to the start page for the domain in the Navigation menu.. |
0,1 |
Optional |
0 |
<PARENTLINK>
|
Includes a link to parent of the page in the Navigation Menu. |
0,1 |
Optional |
0 |
<CURRENTPAGELINK>
|
Includes a link to the current page in the Navigation Menu. |
0,1 |
Optional |
0 |
<NAVLAYOUTSTYLE>
|
Type of navigation:
Only type 5 should be used now – the other values are for older and less efficient types. |
5 |
Optional |
1 |
<LISTALLBRANCHES>
|
Expand/collapse navigation: 0=List selected thread only, 1=Show all branches |
0,1 |
Optional |
0 |
<LISTSISTERS>
|
Expand/collapse navigation: 0=Don't list peers, 1=List peers of selected page |
0,1 |
Optional |
1 |
<LISTPARENTPEERS>
|
Expand/collapse navigation: 0=Don't hold branches open, 1=Hold branches open |
0,1 |
Optional |
1 |
<NAVALTTAGS>
|
Mouseover navigation help (like image alt tags): 0=false, 1=true |
0,1 |
Optional |
0 |
<NAVHELP>
|
Mouseover navigation help (IE only): 0=false, 1=true |
0,1 |
Optional |
0 |
<NAVHELPBORDER>
|
Display border around mouseover navigation help (IE only)* |
0,1 |
Optional |
0 |
<HORZ_DELIMITER>
|
Text element used to separate Horizontal navigation links |
String |
Optional |
No delimiter |
<HORZNAVCLASS>
|
Class assigned to horizontal navigation cells |
String |
Optional |
horznav |
<ACCESSKEYS>
|
Sets displays of access keys, set to false to disable |
True, false |
Optional |
true |
Type 5 Navigation Example Code
The code shown below illustrates different element configurations. This code as a whole is not valid, as different elements apply to different navigation types – it is intended only to illustrate the individual configurations, and the format of the XML code.
<NAVIGATION>
<STARTLOCID>00901a</STARTLOCID>
<PARENTLINK>0</PARENTLINK>
<NAVLAYOUTSTYLE>5</NAVLAYOUTSTYLE>
<LISTALLBRANCHES>0</LISTALLBRANCHES>
<LISTSISTERS>1</LISTSISTERS>
<LISTPARENTPEERS>1</LISTPARENTPEERS>
<MENUCELLFONTCOLOR>FFFFFF</MENUCELLFONTCOLOR>
<MENUCELLHOVERCOLOR>FFFF00</MENUCELLHOVERCOLOR>
<NAVALTTAGS>1</NAVALTTAGS> <NAVHELP>1</NAVHELP>
<NAVHELPBORDER>1</NAVHELPBORDER>
<NAVBUTTONSPACING>1</NAVBUTTONSPACING>
<NAVBUTTONCASE>0</NAVBUTTONCASE>
<PO_HEIGHT>19</PO_HEIGHT>
<PO_WIDTH>170</PO_WIDTH>
<PO_FIRSTBUTTONPOSTIONX>140</PO_FIRSTBUTTONPOSTIONX>
<PO_FIRSTBUTTONPOSTIONY>80</PO_FIRSTBUTTONPOSTIONY>
<PO_INCREMENT>32</PO_INCREMENT>
<PO_FONTSIZE>14</PO_FONTSIZE>
<PO_FONTCOLOR>000000</PO_FONTCOLOR>
<PO_FONTCOLORHILITE>000000</PO_FONTCOLORHILITE>
<PO_MENUITEMBGCOLOR>F2F7D3</PO_MENUITEMBGCOLOR>
<PO_MENUHILITEBGCOLOR>FFFF00</PO_MENUHILITEBGCOLOR>
<SEARCHNAV>1</SEARCHNAV>
<SEARCHBOX>1</SEARCHBOX>
<SEARCHBOXPOSITION>center</SEARCHBOXPOSITION>
<SEARCHBUTTONCOL>CECF6B</SEARCHBUTTONCOL>
<SEARCHTEXTCOL>FFFFFF</SEARCHTEXTCOL>
<SEARCHBUTTONIMAGE>333</SEARCHBUTTONIMAGE>
<SEARCHBUTTONALT>Go</SEARCHBUTTONALT>
</NAVIGATION>
Type 5 Navigation Working Example
The type 5 example described below used as a top level horizontal navigation bar with the level below displayed as drop downs.
This is invoked on the page layout as below;
<NAVIGATION>
<NAVLAYOUTSTYLE>5</NAVLAYOUTSTYLE>
<LEVEL>1</LEVEL>
<ENDLEVEL>3</ENDLEVEL>
<PARENTLINK>0</PARENTLINK>
</NAVIGATION>
Which with the CSS here:
/* horizontal navigation */
.horizNavWrapper1{display:block;width:952px;height:45px;margin-left:3px;background-image:url(2009-layout/horzNavLeftBg.png);
background-repeat:no-repeat;background-position:left top;}
*>.horizNavWrapper1{float:left;}
.horizNavWrapper2{display:block;float:left;width:952px;height:45px;background-image:url(2009-layout/horzNavRightBg.png);
background-repeat:no-
repeat;background-position:right top;}
.horizNavWrapper3{display:block;margin-left:19px;width:916px;height:45px;background-image:url(2009-layout/horzNavRptBg.png);
background-repeat:repeat-x;background-position:19px top;}
.horizNavWrapper3 ul{list-style-type:none;margin:0px;padding:0px;}
.horizNavWrapper3 ul span{padding:0px;margin:0px;line-height:100%;color:#FFFFFF;}
.horizNavWrapper3 #level1{position:relative; float:left;margin-left:-10px;z-index:3;}
.horizNavWrapper3 ul li{padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;display:block;float:left;background-image:url(2009-
layout/horzNavDelim.png);background-position:right 8px;background-repeat:no-repeat;line-height:100%;height:37px;border-bottom:2px solid #FFFFFF;}
*>.horizNavWrapper3 ul li{height:35px;}
.horizNavWrapper3 ul li a{display:block;padding:7px 10px 0px 10px;color:#FFFFFF;font-weight:bold;font-size:0.8em !important;text-decoration:none;line-height:100%;}
.horizNavWrapper3 ul li li a{font-weight:normal; font-size:1.0em !important;}
.horizNavWrapper3 ul ul{display:none;float:left;width:180px;height:auto;background-color:#0A80C8;position:absolute;top:37px;margin:0px 0px 0px
0px;padding:0px 0px 12px 0px;}
.horizNavWrapper3 ul ul li{display:block;float:left;width:180px;border-style:none;padding:0px 16px 0px 20px;margin-top:6px;
background-image:url(2009-layout/2-5_FFFFFF.gif);background-repeat:no-repeat;background-position:10px 10px;height:auto;}
*>.horizNavWrapper3 ul ul li{width:144px;}
.horizNavWrapper3 ul ul li a{padding:0px 0px 0px 0px;margin:0px;line-height:150%;}
.horizNavWrapper3 ul li:hover{border-bottom:2px solid #017BC4;}
.horizNavWrapper3 li li{border-style:none !important;}
.horizNavWrapper3 ul li:hover ul{display:block;}
.horizNavWrapper3 ul li:hover ul ul, .horizNavWrapper3 ul ul ul{display:none;}
.horizNavWrapper3 a:hover{text-decoration:underline;}
… produces this markup (extract):
<div id="menu">
<ul id="level1">
<li id="root"class="nav-selected">
<span class="navfirst">
<a class="level1"accesskey="A"title="Home – AccessKey: A "href="/">Home</a>
</span>
</li>
<li><a class="level1x" accesskey="B"title="How we work – AccessKey: B" href="/How we work">How we work</a>
<ul>
<li><a title="Your Primary Care Trust"href="/How we work/Your-PCT.htm">Your Primary Care Trust</a></li>
<li><a title="Your Council"href="/How we work/Your-Council.htm">Your Council</a></li>
<li><a title="Your Community Services Provider"href="/How we work/Your-Community-Services-Provider.htm">Your Community Services Provider</a></li>
which renders:
Type 6 Navigation
Sitekit 9.2 introduced a new method of navigation, referred to as Type 6 Navigation. The syntax is entirely different from the earlier 1-5 navigation types.
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 |
|
True/False |
True |
If "true", siblings of ancestors to the current page are included in the navigation. |
|
True/False |
True |
If "true", siblings of the current page are included in the navigation. |
|
Integer |
1 |
If "0" then no children of the current page are shown. … etc. |
|
Integer |
100 |
If "0" then no ancestors are shown. .… and so on, up to 100 levels. |
|
True/False |
False |
10.2 and above - If "true", page summaries will be included in the navigation. If the page has no summary then the auto-summary will be used instead. |
|
True/False |
True |
If "true", then the user's profile is shown, if he or she is logged in. |
|
True/False |
True |
If "true" then a logout link is included in the navigation, if the user is logged in. |
|
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. |
|
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. |
|
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. |
|
Integer |
|
Specifies the shortcutID specifying the level of the nav to start on. Useful for megamenus (Added in v9.6.4) |
Type 6 Navigation Notes
- 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.
- The ‘id' and ‘class' specified on the nav block become the ‘id' and ‘class' of the DIV wrapper around the navigation markup.
- 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.
- 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.
- 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.
- 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.
- The active branch is identified by a class SKNavActive on the LI.
- The current page is identified by a class SKNavCurrent on the LI.
- 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.
- There is no XML version of this nav included in XML versions of pages.
- The markup is output without any newlines, spaces or indentation.
Example Type 6 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 Type 6 Breadcrumb
Generally breadcrumbs should be created using the dedicated breadcrumb syntax however they can also be implemented using a type 6 navigation, as shown below.
<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>
Type 6 Navigation – Working Example
The screen shot shown below shows Type 5 Horizontal navigation at the top of the page, and Type 6 Navigation displayed vertically down the left of the page.
… this is invoked on the page layout with the following code:
<div class="vertdNavCol">
<sitekit:navigation id="vertNav" class="vertNavInner" includesiblings="true" includeancestorsiblings="true" maxincludedchildlevels="1"
includeeditprofile="true" includelogout="true" absstartlevel="1" absendlevel="4" />
</div>
…using this CSS;
/* vertical navigation */
.vertNavInner ul{list-style-type:none;margin:0px 0px 0px 23px;padding:0px;}
.vertNavInner ul ul{margin:0px;}
.vertNavInner ul li span{display:none;}
.vertNavInner ul li li span{display:inline;
.vertNavInner ul li li a{display:block;float:left;width:207px;padding:0px 0px 0px 26px;margin:0px;background-image:url(/2012-
layout/imgs/vertNavBullets.gif);background-repeat:no-repeat;background-position:0px 7px;}
*>.vertNavInner ul li li a{width:181px;}
.vertNavInner ul li li.SKNavCurrent a, .vertNavInner ul li li.SKNavActive a{font-weight:bold;}
.vertNavInner ul li li.SKNavCurrent li a, .vertNavInner ul li li.SKNavActive li a{font-size:0.85em!important;background-
color:transparent;background-image:url(/2012-layout/imgs/blueBullet.gif);background-position:28px 13px;background-repeat:no-
repeat;color:#666666;padding:2px 10px 2px 38px;}
.vertNavInner ul li li.SKNavActive li.SKNavCurrent a{font-weight:bold;}
.vertNavInner ul li#vertNavEditProfile,
.vertNavInner ul li#vertNavLogout{padding:10px 10px 0px 10px;}
.vertNavInner ul li#vertNavEditProfile a,
.vertNavInner ul li#vertNavLogout a{color:#666666;}
/* END vertical navigation */
… which produces this markup (extract);
<div class="vertdNavCol"> <div id="vertNav"class="vertNavInner"> <ul class="SKNavLevel1"> <li class="SKNavActive" id="vertNavNode_0"> <span class="SKNavFirst"> <span class="SKNavLast"> <a href="/who-we-are" title="Who We Are">Who We Are</a> </span> </span> <ul class="SKNavLevel2"> <li id="vertNavNode_0_0"> <span class="SKNavFirst"> <a href="/who-we-are/corporate-governance.htm" title="Corporate Governance">Corporate Governance</a> </span> </li> <li id="vertNavNode_0_1"> <a href="/who-we-are/equality-and-diversity.htm" title="Equality & Diversity">Equality & Diversity</a> </li>
<li class="SKNavCurrent" id="vertNavNode_0_2"> <a href="/who-we-are/foundation-trust.htm"title="Foundation Trust">Foundation Trust</a>
<ul class="SKNavLevel3"> <li> <span class="SKNavFirst"> <a href="/who-we-are/becoming-a-foundation-trust.htm" title="Becoming a Foundation Trust">Becoming a Foundation Trust</a> </span> </li> <li> <a href="/who-we-are/become-a-member.htm" title="Become a Member">Become a Member</a> </li> <li> <span class="SKNavLast"> <a href="/who-we-are/have-your-say.htm" title="Have your say">Have your say</a> </span> </li> </ul> </li> <li id="vertNavNode_0_3"> <a href="/who-we-are/meet-the-board.htm" title="Meet the Board">Meet the Board</a> </li> <li id="vertNavNode_0_4"> <a href="/who-we-are/our-partners.htm" title="Our Partners">Our Partners</a> </li> <li id="vertNavNode_0_5"> <a href="/who-we-are/performance-reports.htm"title="Performance Reports">Performance Reports</a> </li> <li id="vertNavNode_0_6"> <a href="/who-we-are/publications.htm" title="Publications">Publications</a> </li> <li id="vertNavNode_0_7"> <a href="/who-we-are/supply-of-goods-and-services.htm" title="Supply of Goods and Services">Supply of Goods</a> </li> <li id="vertNavNode_0_8"> <a href="/who-we-are/where-we-work.htm" title="Where we work">Where we Work</a> </li> <li id="vertNavNode_0_9"> <span class="SKNavLast"> <a href="/who-we-are/vision-and-values.htm" title="Vision and Values">Vision and Values</a> </span> </li> </ul> </li> </ul> </div> </div>