Smartphone Bread List Component

The template part of Bread List for all smartphone pages. This template part is using microdata.

The desktop browser version is Bread List.

Appearnce

The appearance of bread list part is below.

Bread list

The bread list is common parts for almost all pages. This part shows the parent and ancestor pages.

The bread list implements micro data. By the micro data, it can notify the structure of website to the search engine.

Edit the design

This template part consists of Html and Style Sheet.

Edit html

The html to render the bread list is below.

This html contains following micro data.

  • http://data-vocabulary.org/Breadcrumb

The bread list starts from the 2nd level node, therefore it does not contains the top page. If you want to include the top page, add li tag and link in the ul tag before the span tag. The span tag does not appears on the rendered html, because the tag has "alns:ignoreself" with the value "true". It is used to extract the array variable whose name is "@list".

Edit Style Sheet

The style sheet for the bread list html is below.

If you want to change the style sheet, please care to avoid smart phone optimization error. The "Touch elements too close" error often occurs.

By using Speed Insight which is google's optimization tool, you can check that.

Speed insight

If the "User Experience" of the mobile part, it is success.

Server Side Program

The program to get bread list data is below.


In this program, the "getBreadList()" function make the bread list data. It calls "getParent()" function at the first while loop.

After making the list of bread list node page, it makes the attributes, such as class of the node and url.


Go to Top