KAWWA Markup Pattern Library


Breadcrumbs Component Information

  • Class name: (k-breadcrumbs)
  • Version: 1.0
  • Tapestry Tapestry Integration

Add to list

Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back from the current page to its parent ones, following the hierarchical site structure.

Remember to adjust the level of the title to the structure of your document (use The HTML5 Outliner to check and finetune your document outline).

HTML5 Plain Code

  1. <nav class="k-breadcrumbs" role="navigation">
  2. 	<h2>You are here:</h2>
  3. 	<ol>
  4. 		<li><a href="#">Home</a> &gt;</li>
  5. 		<li><a href="#">Components</a> &gt; </li>
  6. 		<li><strong>Component name</strong></li>
  7. 	</ol>
  8. </nav>

CSS Code

  1. nav.k-breadcrumbs {
  2. 	clear: both;
  3.     padding: 2em 4% 0;
  4. }
  6. 	nav.k-breadcrumbs h2 {font-size: 0.7em;}
  8. 	nav.k-breadcrumbs h2,
  9. 	nav.k-breadcrumbs ol,
  10. 	nav.k-breadcrumbs li {
  11. 		display: inline;
  12. 		padding: 0;
  13. 	}
  14. 	nav.k-breadcrumbs h2{
  15. 		font-size: 0.7em;
  16. 	}
  17. 	nav.k-breadcrumbs li {
  18. 		list-style-type: none;
  19. 		font-size: 0.7em;
  20. 	}

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:

Tapestry Integration

Tapestry kawwa components comes with a Breadcrumb component. By default, the list of elements displayed in the breadcrumb is based on the package's hierarchy of your application. You can customize this behaviour by using the breadcrumbListProviderName parameter.

Breadcrumb parameters
Name Required Java Type Default Prefix Default Value Description
home true String literal the first element of the breadcrumb (generally the home page of your application), this is the home parameter of the breadcrumb component
breadcrumbProvider false String literal PackageBasedBread--crumbListProvider The id of the BreadcrumbListProvider implementation. This implementation has to return an ordered list of String[] that will be displayed in the breadcrumb. String[0] is the page name, used to generate the pagelink. String[1] is the text to display in the breadcrumb. Please find an example below.
splittingChar false String literal > Splitting character between breadcrumb elements
lastSplittingChar false String literal > Last splitting character : between the last pagelink and the current page

The Template

  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  2. 	xmlns:p="tapestry:parameter">
  4.  	The following breadcrumb is based on the package's hierarchy of your application. 
  5.  	<t:kawwa2.breadcrumb t:home="Index"/>
  6.  	You can specify what elements will be included into your breadcrumb by creating your own implementation of BreadcrumbListProvider.
  7.  	You have an example of how to do it in the java snippet.
  8.  	<t:kawwa2.breadcrumb t:home="Index" t:breadcrumbProvider="TheIdOfYourBreadcrumbListProvider"/>
  10. </html>

Java Implementation

  1. //Here is how you can create your own BreadCrumb
  3. //You first have to implement the following interface.
  5. public interface BreadcrumbListProvider {
  6. 	/* This method is called within the breadcrumb component.
  7. 	 * Parameters :
  8. 	 * - home : the first element of the breadcrumb (generally the home page of your application), 
  9. 	 * this is the home parameter of the breadcrumb component 
  10. 	 * - resources : the componentResources service associated with the current Breadcrumb component
  11. 	 * This method has to return a  List<String[]>, with :
  12. 	 * - String[0] is the page name (to create the pagelink)
  13. 	 * - String[1] is the text to be displayed
  14. 	 */
  15. 	List<String[]> getBreadcrumbList (String home, ComponentResources resources);
  16. }
  18. //Then you have to contribute your implementation to the BreadcrumbListProviderSource.
  19. //You just have to give an id and the class of your implementation.
  21. @Contribute(BreadcrumbListProviderSource.class)
  22. public static void addingYourkageBasedBreadcrumbListProvider(MappedConfiguration<String, BreadcrumbListProvider> configuration)
  23. {
  24. 	configuration.addInstance("TheIdOfYourBreadcrumbListProvider", YourBreadcrumbListProvider.class);
  25. }
  27. //The id is important, because if you want to use your own implementation, 
  28. //you will have to specifiy it when adding the component into your page : 
  29. <t:kawwa.breadcrumb t:home="Index" t:breadcrumbProvider="TheIdOfYourBreadcrumbListProvider"/>


List of Components


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





Site Utilities