posted time Created time: 2015-07-19 posted time Last updated time:

Bread Crumb component for CMS Template

The bread list is one of the most important widget on creating website. It is effective to make effective internal links. In addition to that, by adding structured data into the Html code, we can check if the page is analysed or not.

Appearance of the Bread Crumb component

The Bread List is important component to build internal links to show the page structure in the website.

It is shown on the top of page after the header part.

Bread list

The default setting do not contains the last title of the page, which is current page. When you customise the design, you can add it.

Usage in the Top Templates

This Bread List component is for main contents and other pages. Following pages use this bread list component.

  • Default Page
  • Top Page
  • Search Page
  • Blog Top Page
  • Blog Category Page

The Blog Article page do not use this bread list, because there is another bread list component, which is for Blog Articles.

The Blog Article page's bread list is calculated from the Keyword Tag setting.

Source code of the Bread Crumb component

The Bread Crumb component consists of Html code, Server side program, and Style Sheet.

Html code

The Html code of the Bread Crumb is below.

This Html code is to generate html from the "@list" variable. The variable is generated by the server side program.

This Html code contains structured data, which is the "Breadcrumb". You can confirm the data is detected by the Search Console of the Google.

Server side program

The program code of the Bread Crumb is below.

This program does following operations.

Get current position from database

At first, query the database table, which is the "tree_model", and get current path of the page.

This operation is to avoid error, and in normal case, error does not exists. If the tree model of current page does not exists, it ends the operation.

Get Bread List variables

The "getBreadList()" function is to create the bread list variable, which is array of pages. This is the main operation of this component.

This function uses the "getPage()" function. It calculates the parent and ancestor pages to make list of these pages, and return it.

After that, the "getBreadList()" function create the "@bread" variable and return it. it is used in the Html generation.

Style Sheet

The Style Sheet of the Bread Crumb is below.

Image Resource

The Style Sheet uses icon image. The image resource is below.

image resources

This image is included in the default template. When you customize the design of the Bread List, delete these image, and add your favorite image to use in the Style Sheet.


Go to Top