Ribbon

Ribbon is container component to group different sets of controls in a tabbed layout. Special styling is applied to inner components for a unified look.

Documentation
  • Options
  • Clipboard
  • b
    u
    i
    Fonts
  • Zoom
<p:ribbon>
    <p:tab title="File">
        <p:ribbonGroup label="Options">
            <p:commandButton value="New" icon="ui-ribbonicon-new" styleClass="ui-ribbon-bigbutton" type="button"/>
            <p:commandButton value="Save" icon="ui-ribbonicon-save" styleClass="ui-ribbon-bigbutton" type="button"/>
        </p:ribbonGroup>

        <p:ribbonGroup label="Clipboard" style="width:120px">
            <p:commandButton value="Paste" icon="ui-ribbonicon-paste" styleClass="ui-ribbon-bigbutton" type="button"/>
            <p:commandButton value="Cut" icon="ui-ribbonicon-cut" style="width:64px" type="button"/>
            <p:commandButton value="Print" icon="ui-ribbonicon-print" style="width:64px" type="button"/>
        </p:ribbonGroup>

        <p:ribbonGroup label="Fonts" style="width:220px">
            <p:selectOneMenu appendTo="@this">
                <f:selectItem itemLabel="Arial" itemValue="0" />
                <f:selectItem itemLabel="Comis Sans" itemValue="1" />
                <f:selectItem itemLabel="Helvetica" itemValue="2" />
                <f:selectItem itemLabel="Times New Roman" itemValue="3" />
                <f:selectItem itemLabel="Verdana" itemValue="4" />
            </p:selectOneMenu>

            <p:selectOneMenu appendTo="@this">
                <f:selectItem itemLabel="10" itemValue="10" />
                <f:selectItem itemLabel="12" itemValue="12" />
                <f:selectItem itemLabel="14" itemValue="14" />
                <f:selectItem itemLabel="18" itemValue="18" />
                <f:selectItem itemLabel="24" itemValue="24" />
                <f:selectItem itemLabel="36" itemValue="36" />
                <f:selectItem itemLabel="72" itemValue="72" />
            </p:selectOneMenu>

            <p:selectManyButton>
                <f:selectItem itemLabel="b" itemValue="b" />
                <f:selectItem itemLabel="u" itemValue="u" />
                <f:selectItem itemLabel="i" itemValue="i" />
            </p:selectManyButton>

            <p:colorPicker />  
        </p:ribbonGroup>
    </p:tab>

    <p:tab title="View">
        <p:ribbonGroup label="Zoom">
            <p:commandButton value="In" icon="ui-ribbonicon-zoomin" styleClass="ui-ribbon-bigbutton" type="button" />
            <p:commandButton value="Out" icon="ui-ribbonicon-zoomout" styleClass="ui-ribbon-bigbutton" type="button"/>   
        </p:ribbonGroup>
    </p:tab>
</p:ribbon>
                

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.