[ KAWWA PORTAL ] Components : Sitemap

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.

Demo
Snippets

HTML5 Plain Code

COPY

```
<ul class="k-sitemap">
```

	<li class="one-level"><a href="/component/pageStructure">Page Structure</a></li>

```
	<li>Navigation
```
```
		<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>Forms
```
```
		<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>Blocks
```
```
		<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

COPY

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:

Top

KAWWA Markup Pattern Library

Site Utilities

Sitemap

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce