Syntax Guide

Article number: 300862
Last updated: 19 November 2014

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
logged in to an extranet page): 0=Show, 1=Don't Show

0,1

Optional

0

<NOEDITPROFILE>

Whether or not to show an "Edit Profile" link (if a user is
logged in to an extranet page): 0=Show, 1=Don't Show

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:

  1. Tree (deprecated)
  2. Button (deprecated)
  3. Pop-Out (deprecated – use type 5 instead).
  4. Horizontal (deprecated)
  5. Pop-Out AAA Accessible.

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
nb. This text must not include the code &nbsp

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:

nav type 5 example

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

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.

includesummaries

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.

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.

start

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

  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.

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.

nav type 6 example

  … 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 &amp; Diversity">Equality &amp; 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>

Related questions


This article was last updated on 19 November 2014. Did you find it helpful?