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 in the section head-end of the facelets template.

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 prependId="false">
                        <p:tooltip/>
                        <div class="ui-g ui-fluid">
                            <div class="ui-g-12 ui-md-4">
                                <p:inputText id="inpt-title" required="true" placeholder="Breadcrumb title, ex: Github" value="#{breadcrumbExampleMB.title}"
                                             />
                                <p:message for="inpt-title" display="tooltip"/>

                            </div>
                            <div class="ui-g-12 ui-md-4">
                                <p:inputText id="inpt-link" required="true" placeholder="Breadcrumb link, ex: http://github.com" value="#{breadcrumbExampleMB.link}"
                                             />
                                <p:message for="inpt-link" display="tooltip"/>
                            </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 in the section <code>head-end</code> of the facelets template.</p>
                     <p>You can set the property <code>admin.renderBreadCrumb=false</code> in <a href="http://adminfaces-rpestano.rhcloud.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>