- Page Structure
- Navigation
- Forms
- Blocks
- Tabs
- Collapsible Panel
- Accordion
- Carousel
- Info Block
Site Utilities
Sitemap 
- Class name: (k-sitemap)
- Version: 1.0
The Sitemap Component is a simple index that maps the hierarchy of your site, and it may present in a single page or in the footer of your main pages.
Notice that its presence is mandatory for accessible sites.
HTML5 Plain Code
-
<ul class="k-sitemap">
-
<li class="one-level"><a href="/component/pageStructure">Page Structure</a></li>
-
<li><strong>Navigation</strong>
-
<ul class="level2">
-
<li><a href="/component/mainNav">Main navigation</a>
-
<ul class="level3">
-
<li><a href="#">Dropdown</a></li>
-
<li><a href="#">Two levels</a></li>
-
</ul>
-
</li>
-
<li><a href="/component/vmenu">Vertical Menu</a></li>
-
<li><a href="/component/breadcrumbs">Breadcrumbs</a></li>
-
<li><a href="/component/skip">Skip navigation link</a></li>
-
<li><a href="/component/treeview">Treeview</a></li>
-
<li><a href="/component/treeviewGrid">Treeview Grid</a></li>
-
</ul>
-
</li>
-
<li><strong>Forms</strong>
-
<ul class="level2">
-
<li><a href="/component/subFieldsets">Sub-fieldsets</a></li>
-
<li><a href="/component/checkboxes">Checkboxes</a></li>
-
<li><a href="/component/radios">Radios</a></li>
-
<li><a href="/component/mandatoryInfo">Mandatory Info</a></li>
-
<li><a href="/component/requiredField">Required field</a></li>
-
<li><a href="/component/inputHelp">Input Help</a></li>
-
<li><a href="/component/fieldComment">Field Comment</a></li>
-
<li><a href="/component/errorField">Error Field</a></li>
-
<li><a href="/component/errorMessages">Error Messages</a></li>
-
</ul>
-
</li>
-
<li><strong>Blocks</strong>
-
<ull class="level2">
-
<li><a href="/component/tabs">Tabs</a></li>
-
<li><a href="/component/collapsiblePanel">Collapsible Panel</a></li>
-
<li><a href="/component/accordion">Accordion</a></li>
-
<li><a href="/component/carousel">Carousel</a></li>
-
<li><a href="/component/infoBlock">Info Block</a></li>
-
</ul>
-
</li>
-
</ul>
CSS Code
-
ul.k-sitemap {float: left; width: 100%; margin-bottom: 2em;}
-
ul.k-sitemap ul {margin-bottom: 2em;}
-
ul.k-sitemap li {
-
float: left;
-
width: 20%;
-
list-style-type: none;
-
padding-left: 2%;
-
margin-right: 2%;
-
border-left: 1px solid #CCC;
-
}
-
ul.k-sitemap li:first-child {padding: 0; margin: 0; border-left: none;}
-
ul.k-sitemap li strong {
-
display: block;
-
font-size: 0.8em;
-
color: #FFF;
-
background: #000;
-
padding: 0.5em 0.5em;
-
}
-
ul.k-sitemap li ul {padding: 0;}
-
ul.k-sitemap li li {
-
float: none;
-
width: auto;
-
padding: 0.5em 0.3em;
-
border: none;
-
border-bottom: 1px dashed #CCC;
-
}
-
ul.k-sitemap li li:first-child {padding: 1em 0.3em 0.5em;}
-
/* Third level */
-
ul.k-sitemap li li ul {padding: 0.5em 0; margin-top: 0.5em;}
-
ul.k-sitemap li li li, ul.k-sitemap li li li:first-child {
-
border: none;
-
border-left: 1px solid #CCC;
-
}
-
ul.k-sitemap li li li a {padding-left: 1em;}
IE Backward Compatibility
In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments: