KAWWA Markup Pattern Library


Site Utilities

Sitemap Component Information

  • Class name: (k-sitemap)
  • Version: 1.0

Add to list

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

COPY
  1. <ul class="k-sitemap">
  2. 	<li class="one-level"><a href="/component/pageStructure">Page Structure</a></li>
  3. 	<li><strong>Navigation</strong>
  4. 		<ul class="level2">
  5. 			<li><a href="/component/mainNav">Main navigation</a>
  6. 				<ul class="level3">
  7. 					<li><a href="#">Dropdown</a></li>
  8. 					<li><a href="#">Two levels</a></li>
  9. 				</ul>
  10. 			</li>
  11. 			<li><a href="/component/vmenu">Vertical Menu</a></li>
  12. 			<li><a href="/component/breadcrumbs">Breadcrumbs</a></li>
  13. 			<li><a href="/component/skip">Skip navigation link</a></li>
  14. 			<li><a href="/component/treeview">Treeview</a></li>
  15. 			<li><a href="/component/treeviewGrid">Treeview Grid</a></li>
  16. 		</ul>
  17. 	</li>
  18. 	<li><strong>Forms</strong>
  19. 		<ul class="level2">
  20. 			<li><a href="/component/subFieldsets">Sub-fieldsets</a></li>
  21. 			<li><a href="/component/checkboxes">Checkboxes</a></li>
  22. 			<li><a href="/component/radios">Radios</a></li>
  23. 			<li><a href="/component/mandatoryInfo">Mandatory Info</a></li>
  24. 			<li><a href="/component/requiredField">Required field</a></li>
  25. 			<li><a href="/component/inputHelp">Input Help</a></li>
  26. 			<li><a href="/component/fieldComment">Field Comment</a></li>
  27. 			<li><a href="/component/errorField">Error Field</a></li>
  28. 			<li><a href="/component/errorMessages">Error Messages</a></li>
  29. 		</ul>
  30. 	</li>
  31. 	<li><strong>Blocks</strong>
  32. 		<ull class="level2">
  33. 			<li><a href="/component/tabs">Tabs</a></li>
  34. 			<li><a href="/component/collapsiblePanel">Collapsible Panel</a></li>
  35. 			<li><a href="/component/accordion">Accordion</a></li>
  36. 			<li><a href="/component/carousel">Carousel</a></li>
  37. 			<li><a href="/component/infoBlock">Info Block</a></li>
  38. 		</ul>
  39. 	</li>
  40. </ul>

CSS Code

COPY
  1. ul.k-sitemap {float: left; width: 100%; margin-bottom: 2em;}
  2. 	ul.k-sitemap ul {margin-bottom: 2em;}
  3. 
                                
  4. 	ul.k-sitemap li {
  5. 		float: left;
  6. 		width: 20%;
  7. 		list-style-type: none;
  8. 		padding-left: 2%;
  9. 		margin-right: 2%;
  10. 		border-left: 1px solid #CCC;
  11. 	}
  12. 	ul.k-sitemap li:first-child {padding: 0; margin: 0; border-left: none;}
  13. 
                                
  14. 		ul.k-sitemap li strong {
  15. 			display: block;
  16. 			font-size: 0.8em;
  17. 			color: #FFF;
  18. 			background: #000;
  19. 			padding: 0.5em 0.5em;
  20. 		}
  21. 		ul.k-sitemap li ul {padding: 0;}
  22. 		ul.k-sitemap li li {
  23. 			float: none;
  24. 			width: auto;
  25. 			padding: 0.5em 0.3em;
  26. 			border: none;
  27. 			border-bottom: 1px dashed #CCC;
  28. 		}
  29. 		ul.k-sitemap li li:first-child {padding: 1em 0.3em 0.5em;}
  30. 
                                
  31. 		/* Third level */
  32. 		ul.k-sitemap li li ul {padding: 0.5em 0; margin-top: 0.5em;}
  33. 		ul.k-sitemap li li li, ul.k-sitemap li li li:first-child {
  34. 			border: none;
  35. 			border-left: 1px solid #CCC;
  36. 		}
  37. 		ul.k-sitemap li li li a {padding-left: 1em;}
  38. 
                                

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:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce