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<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>