Breadcrumbs

Needs Specifications

Breadcrumbs Markup

Automatic Breadcrumbs Generation

Breadcrumbs can be generated by Template Package in a variety of ways, but by default, Template Package 4 will look at the current page, then compare that to the left navigation and activate the appropriate sections in the left nav. While this is happening, Template Package also tracks the left nav chain and converts the text/href properties in that chain into bread crumbs.
Sample Code
// Example configuration for this use case window.pageOptions = window.pageOptions || {}; window.pageOptions.navigation = window.pageOptions.navigation || {}; window.pageOptions.navigation.breadcrumbs = { mode: 'auto' };

Automatic Breadcrumbs Generation with Prefix

You may also find it necessary to add a root level breadcrumb item or prefix to your page breadcrumbs. In such a case, use the prefix option to specifc the text and href for the prefix.
Sample Code
// Example configuration for this use case
window.pageOptions = window.pageOptions || {};
window.pageOptions.navigation = window.pageOptions.navigation || {};
window.pageOptions.navigation.breadcrumbs = {
    mode: 'auto',
    prefix: {
        text: 'My Prefix',
        href: 'www.cdc.gov/test-url.html'
    }
};

Manual Breadcrumbs Generation with Data

Lastly, should you need to mannually need to create breadcrumbs, you may select the 'manual' mode, and specify your own data for the breadcrumbs as follows.
Sample Code
// Example configuration for this use case
window.pageOptions = window.pageOptions || {};
window.pageOptions.navigation = window.pageOptions.navigation || {};
window.pageOptions.navigation.breadcrumbs = {
    mode: 'manual',
    data: [{
        text: 'My First Level',
        href: 'www.cdc.gov/test-url.html'
    }, {
        text: 'My Second Level',
        href: 'www.cdc.gov/test-url.html'
    }],
    prefix: {
        text: 'My Prefix',
        href: 'www.cdc.gov/test-url.html'
    }
};

Automatic Breadcrumbs Generation with Multiple Prefixes

You may also find it necessary to add one or more parent/root level breadcrumb items to your page breadcrumbs. In such a case, use the "prefix" option to specifc the text and href for the prefix.
Sample Code
// Example configuration for this use case
window.pageOptions = window.pageOptions || {};
window.pageOptions.navigation = window.pageOptions.navigation || {};
window.pageOptions.navigation.breadcrumbs = {
    mode: 'auto',
    prefix: [{
        text: 'My Prefix',
        href: 'www.cdc.gov/test-url.html'
    }, {
        text: 'My Second Prefix',
        href: 'www.cdc.gov/test-url-two.html'
    }]
};

Automatic Breadcrumbs Generation with Multiple Prefixes

To add prefixes with an indexed array, use the "prefixes" option to specifc the text and href for the prefix.
Sample Code
// Example configuration for this use case
window.pageOptions = window.pageOptions || {};
window.pageOptions.navigation = window.pageOptions.navigation || {};
window.pageOptions.navigation.breadcrumbs = {
    mode: 'auto',
    prefixes: {
        0: {
            text: 'My Prefix',
            href: 'www.cdc.gov/test-url.html'
        },
        1: {
            text: 'My Second Prefix',
            href: 'www.cdc.gov/test-url-two.html'
        }
    }
};

Automatic Breadcrumbs Generation Showing the Current Page

You may also find it necessary to show the current page in the breadcrumbs. In such a case, use the showCurrentPage option to include the current page.
Sample Code
// Example configuration for this use case
window.pageOptions = window.pageOptions || {};
window.pageOptions.navigation = window.pageOptions.navigation || {};
window.pageOptions.navigation.breadcrumbs = {
    mode: 'auto',
    showCurrentPage: true
};
View Page In: PDF [150k] DOC [150k]
Page last reviewed: