Quicklinks

A common thing that one can see in web applications is bread crumbs that help users to locate themself in the application and to navigate. The <layout:crumbs> and <layout:crumb> tags can be used to render bread crumbs.

tags crumbs - crumb

Examples

crumbs

Display bread crumbs to help users to navigate in the application

The crumbs are actually displays in a panel. Use the crumb tag to set the crumbs.

Attributes

Attribute NameDescription
styleClassThe css style class to use to render the crumbs panel
separatorThe character to use to separate the crumbs (default: |)
separatorClassThe css style class to use to render the separator. If set, the separator character is not used, but a <div> tag is inserted instead. This allows to have a skinnable image for the separator (the image should be set as the background image of the style class)
separatorWidthWidth of the <div> element if used.
separatorHeightHeight of the <div> element if used.
crumbsNameName of a bean containing a collection of Crumb in the context
crumbsPropertyProperty of the bean containing the collection of Crumb. If set and not null, the crumbs in the collection will be displayed, allowing dynamic crumbs
bundleGlobal bundle to use to retrieve the crumbs messages

crumb

Display one bread crumb to help users to navigate in the application

Attributes

Attribute NameDescription
bundlebundle to use to retrieve the crumb message
keyKey of the message to display
linklink to follow when an user clicks on the crumb.
targetWindows to open the link in

Examples

<%@ taglib uri="/WEB-INF/struts-layout.tld" prefix="layout" %>
<html>
<head>
<layout:skin/>
</head>
<body>
	Web page Title: crumbs tag example
	<br><br>
	<layout:crumbs styleClass="CRUMBS" separator=">">
		<layout:crumb key="crumbs.home" link="/index.html"/>
		<layout:crumb key="crumbs.crumbs" link="/documentation.html"/>
		<layout:crumb key="crumbs.example"/>
	</layout:crumbs>
	<br>
	Web page content
	Web page content
	Web page content
	Web page content
</body>
</html>

Result

Note that:

  • The crumbs tag automatically generates the style class names to use for the anchor. For example, if the crumbs tag is set to use the CRUMB style class, the crumbs tag will set the first link to use the CRUMB1 style class, the second link CRUMB2 etc.
  • It is posssible to set the separator between the crumb by using the separator attribute. The default separator is |.
  • It is possible to use a skinnable image for the separator. To do this, create a style class with the separator as background-image. Set this style class to be the separator (attribute separatorClass) and specify the image size (attributes separatorWidth and separatorHeight). To finish set different image urls in the different css files