Breadcrumb navigation Breadcrumbs indicates the location of the user within the site’s hierarchy.

Breadcrumbs is a (composite) component provided by Admin Template.

To use it just declare the namespace xmlns:adm="http://github.com/adminfaces" and use the component <adm:breadcrumb providing link and title attributes.

It will generate a link using title as label and put it into breadcrumb on top of user navigation history.

Tip!

You can also create breadcrumb links programmatically:

NOTE

<adm:breadcrumb component (used in this page) adds breadCrumb in preRenderView phase so it adds this page before Add breadcrumb button.

NOTE

You don't need to provide link attribute, in this case the component will use current page url (viewId) where component is declared.

Tip!

You can disable breadCrumb in a specific page or in entire project:

To disable in a page just use a ui:param like below:

<ui:param name="renderBreadCrumb" value="false"

Declare the param outside of ui:define tags as a direct child of ui:composition, see Showcase index page for example.

You can set the property admin.renderBreadCrumb=false in admin-config.properties to disable in all pages.

               <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:adm="http://github.com/adminfaces"
                xmlns:h="http://java.sun.com/jsf/html"
                template="#{layoutMB.template}">

    <ui:define name="title">
        Breadcrumb navigation
    </ui:define>

    <ui:define name="description">
        <p:link value="Breadcrumbs"
                href="https://uxplanet.org/breadcrumbs-for-web-sites-what-when-and-how-9273dacf1960"/> indicates the location of the user within the site���s hierarchy.
    </ui:define>

    <ui:define name="body">
        <adm:breadcrumb link="/pages/layout/breadcrumb" title="Breadcrumbs"/>

        <div class="box box-primary">
            <div class="box-header with-border">
                <p>Breadcrumbs is a (composite) component provided by <code>Admin Template</code>.</p>

                <p>To use it just declare the namespace
                    <code>xmlns:adm="http://github.com/adminfaces"</code> and use the component <code>
                            &lt;adm:breadcrumb</code> providing <b>link</b> and <b>title</b> attributes.</p>

                <p>It will generate a <b>link</b> using
                    <b>title</b> as label and put it into breadcrumb on top of user navigation history.</p>

                <div class="callout-card callout-info">
                    <h4>Tip!</h4>

                    <p>You can also create breadcrumb links programmatically:</p>
                    <h:form>
                        <div class="ui-g ui-fluid">
                            <div class="ui-g-12 ui-md-4">
                                <p:inputText id="inpt-title" placeholder="Breadcrumb title, ex: Github" value="#{breadcrumbExampleMB.title}"
                                             />
                            </div>
                            <div class="ui-g-12 ui-md-4">
                                <p:inputText id="inpt-link" placeholder="Breadcrumb link, ex: http://github.com" value="#{breadcrumbExampleMB.link}"
                                             />
                            </div>
                            <div class="ui-g-12 ui-md-4">
                                <p:commandButton value="Add breadcrumb" actionListener="#{breadcrumbExampleMB.add}"
                                                 styleClass="btn-primary" ajax="false"/>
                            </div>
                        </div>
                    </h:form>
                </div>
                <div class="callout-card callout-warning">
                    <h4>NOTE</h4>

                    <p><code>&lt;adm:breadcrumb</code> component (used in this page) adds breadCrumb in <b><i>preRenderView</i></b> phase so it adds this page <code>before</code> <b>Add breadcrumb</b> button.</p>
               </div>

                 <div class="callout-card callout-success">
                    <h4>NOTE</h4>

                    <p>You don't need to provide <code>link</code> attribute, in this case the component will use <b>current page url</b> (viewId) where component is declared.</p>
               </div>

                 <div class="callout-card callout-danger">
                    <h4>Tip!</h4>

                    <p>You can <code>disable</code> breadCrumb in a specific page or in entire project:</p>

                    <p>To disable in a page just use a ui:param like below:</p>
                    <p><code>&lt;ui:param name="renderBreadCrumb" value="false" </code></p>
                    <p>Declare the param outside of <code>ui:define</code> tags as a direct child of <code>ui:composition</code>, see <p:link href="https://github.com/adminfaces/admin-showcase/blob/71b972cdb2d609e08ea5084283072ccf753afadc/src/main/webapp/index.xhtml#L8" target="_blank" value="Showcase index page"/> for example.</p>
                     <p>You can set the property <code>admin.renderBreadCrumb=false</code> in <a href="http://admin-showcase-admin-showcase.7e14.starter-us-west-2.openshiftapps.com/showcase/docs/#configuration" target="_blank">admin-config.properties</a> to disable in <b>all pages</b>.</p>
                </div>


            </div>
        </div>
    </ui:define>

    <ui:define name="code">
        <p:tabView>
            <p:tab title="breadcrumb.xhtml">
           <pre>
               <code class="language-html"><h:outputText
                       value="#{sourceCodeMB.getPageSource()}" escape="true"/></code>
           </pre>
            </p:tab>
            <p:tab title="BreadcrumbExampleMB.java">
              <pre>
               <code class="language-java">
                   <h:outputText
                           value="#{sourceCodeMB.getJavaSource('com.github.adminfaces.showcase.bean.BreadcrumbExampleMB')}"
                           escape="false"/>
               </code>
             </pre>
            </p:tab>

        </p:tabView>
    </ui:define>
</ui:composition>