Horizontal Tree - Basic

Horizontal tree has two modes, in client mode all nodes are available at client side whereas in ajax mode only expanded nodes are available.

Documentation Widget

Client

Root

Ajax

Root
<h:form>
    <h3 style="margin-top:0">Client</h3>
    <p:tree value="#{treeBasicView.root}" var="node" orientation="horizontal">
        <p:treeNode>
            <h:outputText value="#{node}" />
        </p:treeNode>
    </p:tree>
    
    <h3>Ajax</h3>
    <p:tree value="#{treeBasicView.root}" var="node" dynamic="true" orientation="horizontal">
        <p:treeNode>
            <h:outputText value="#{node}" />
        </p:treeNode>
    </p:tree>
</h:form>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.