<navigation:breadcrumbs>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs
DESCRIPTION
ATTRIBUTES
id
linkCurrentPage
separator
showCurrentPage
showHomePage
EXAMPLES
Page Breadcrumbs
navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<navigation:breadcrumbs />`

Creates bread crumb navigation for use in website designs.

Related Tutorials

Attributes

- `id`
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `linkCurrentPage`
bool
Sets whether to link the current page in the bread crumbs.
- `separator`
string
Sets the characters which separate the links in the breadcrumbs
- `showCurrentPage`
bool
Sets whether to show the current page in the bread crumbs
- `showHomePage`
bool
Sets whether to show the home page in the bread crumbs

Tutorials

Oncord includes a range of UI Controls to tackle common website navigation elements:  

Dynamic Navigation

A navigation menu is said to be dynamic where it reflects the page sitemap structure, updating automatically when Pages are added, removed, or re-ordered.

Dynamic navigation is usually preferable over a statically coded list of hyperlinks, as it allows non-technical administrators to alter the navigation without manipulating code.

Primary Navigation

The main "primary" method of navigating a website. The primary navigation menu is usually located within a website header element, located towards the top of the page.

 Primary Navigation UI Control: <navigation:primary>

View Tutorial View Tutorial

Secondary Navigation

Fall-back navigation aimed at providing extra navigation items relevant to the users current position on the site. Usually used for sidebar navigation menus, or pages listed in the footer of the website.

 Secondary Navigation UI Control: <navigation:secondary>

View Tutorial View Tutorial

Breadcrumb Navigation

Shows the current navigation item, in addition to the previous parent navigation items.

 Breadcrumb Navigation UI Control: <navigation:breadcrumbs />

View Tutorial View Tutorial

Sitemap

A map of the hierarchy of all pages on the website. A human-readable sitemap is automatically generated on all Oncord websites at yourwebsitedomain.com/sitemap. 

A sitemap.xml file is also generated automatically, at the url yourwebsitedomain.com/sitemap.xml

What's Next?

To get started, click here to learn how to implement a dynamic primary navigation menu. 

Examples

Page Breadcrumbs

Display breadcrumbs navigation link on page

HTML:

 <navigation:breadcrumbs id="page_breadcrumbs" showhomepage="true" separator=" &rsaquo; "/>