Toolbar is a horizontal-oriented panel that can be used in different ways: for top level menu, for information panel, for tools-like menu and so on.
The following example shows how the panelBar might look like:

Tool Bar example 1

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

<style>
    .pic{
        margin-bottom: -4px;
        margin-right: 2px;
}

</style>

    <rich:toolBar height="26" itemSeparator="grid">
      <rich:toolBarGroup>
          <h:graphicImage value="/images/icons/create_doc.gif" styleClass="pic"/>
          <h:graphicImage value="/images/icons/create_folder.gif" styleClass="pic"/>
          <h:graphicImage value="/images/icons/copy.gif" styleClass="pic"/>
      </rich:toolBarGroup>
      <rich:toolBarGroup>
          <h:graphicImage value="/images/icons/save.gif" styleClass="pic"/>
          <h:graphicImage value="/images/icons/save_as.gif" styleClass="pic"/>
          <h:graphicImage value="/images/icons/save_all.gif" styleClass="pic"/>
      </rich:toolBarGroup>
      <rich:toolBarGroup location="right">
          <h:graphicImage value="/images/icons/find.gif" styleClass="pic"/>
          <h:graphicImage value="/images/icons/filter.gif" styleClass="pic"/>
      </rich:toolBarGroup>
    </rich:toolBar>

</ui:composition>

<<Hide Source

Tool Bar example 2

Edit

Find

Filter

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
        <style>
            .barsearch {
                height:14px;
                width:100px;
            }
            .barsearchbutton {
                border-width:1px;
                background-color:#{a4jSkin.generalBackgroundColor};
            }
        </style>
        <h:form>
        <rich:toolBar height="34" itemSeparator="line">
            <rich:toolBarGroup>
              <h:graphicImage id="edit" value="/images/icons/edit.gif" />
              <h:outputLabel value="Edit" for="edit" />
            </rich:toolBarGroup>
            <rich:toolBarGroup>                       
              <h:graphicImage id="find" value="/images/icons/find.gif" />
              <h:outputLabel value="Find" for="find" />
            </rich:toolBarGroup>
            <rich:toolBarGroup>                       
              <h:graphicImage id="filter" value="/images/icons/filter.gif" />
              <h:outputLabel value="Filter" for="filter" />
            </rich:toolBarGroup>
            <rich:toolBarGroup location="right">
                <h:inputText styleClass="barsearch" />
                <h:commandButton styleClass="barsearchbutton" onclick="return false;"  value="Search" />
            </rich:toolBarGroup>
        </rich:toolBar>
        </h:form>


</ui:composition>

<<Hide Source

Items on the toolBar can be grouped with ability to define a separator between different groups and between a member of the same group. The "location" attribute set to "right" put a group to the right side of the panel.

Tool Bar Separator example

Group Separator: Line Grid Disc Square None

Group Item Separator: Line Grid Disc Square None

Group1.1

Group1.2

Group1.3

Group2.1

Group2.2

Group3.1

Group3.2

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">

    <h:form>
        <h:panelGrid columns="3" width="100%" cellpadding="0" cellspacing="0" style="margin-bottom : 4px">
            <rich:panel bodyClass="rich-laguna-panel-no-header">
                <h:panelGrid columns="8">
                <h:outputText value="Group Separator:" />
                 <a4j:commandLink value="Line" reRender="bar">
                    <a4j:actionparam name="gs" value="line" assignTo="#{tbBean.groupSeparator}" />
                 </a4j:commandLink>
                 
                 <a4j:commandLink value="Grid" reRender="bar">
                    <a4j:actionparam name="gs" value="grid" assignTo="#{tbBean.groupSeparator}" />
                 </a4j:commandLink>
                 
                 <a4j:commandLink value="Disc" reRender="bar">
                    <a4j:actionparam name="gs" value="disc" assignTo="#{tbBean.groupSeparator}" />
                 </a4j:commandLink>
                 
                 <a4j:commandLink value="Square" reRender="bar">
                    <a4j:actionparam name="gs" value="square" assignTo="#{tbBean.groupSeparator}" />
                 </a4j:commandLink>
                 
                 <a4j:commandLink value="None" reRender="bar">
                    <a4j:actionparam name="gs" value="none" assignTo="#{tbBean.groupSeparator}" />
                 </a4j:commandLink>
                 </h:panelGrid>
            </rich:panel>
            <h:panelGroup style="padding-left : 4px">
                <br/>
            </h:panelGroup>
            <rich:panel bodyClass="rich-laguna-panel-no-header">
                <h:panelGrid columns="8">
                <h:outputText value="Group Item Separator:" />
                 <a4j:commandLink value="Line" reRender="bar">
                    <a4j:actionparam name="gs" value="line" assignTo="#{tbBean.groupItemSeparator}" />
                 </a4j:commandLink>
                 
                 <a4j:commandLink value="Grid" reRender="bar">
                    <a4j:actionparam name="gs" value="grid" assignTo="#{tbBean.groupItemSeparator}" />
                 </a4j:commandLink>

                 <a4j:commandLink value="Disc" reRender="bar">
                    <a4j:actionparam name="gs" value="disc" assignTo="#{tbBean.groupItemSeparator}" />
                 </a4j:commandLink>
                 
                 <a4j:commandLink value="Square" reRender="bar">
                    <a4j:actionparam name="gs" value="square" assignTo="#{tbBean.groupItemSeparator}" />
                 </a4j:commandLink>
                 
                 <a4j:commandLink value="None" reRender="bar">
                    <a4j:actionparam name="gs" value="none" assignTo="#{tbBean.groupItemSeparator}" />
                 </a4j:commandLink>
                 </h:panelGrid>
            </rich:panel>
        </h:panelGrid>              
    </h:form>   

    <rich:toolBar id="bar" height="30" itemSeparator="#{tbBean.groupSeparator}">
        <rich:toolBarGroup itemSeparator="#{tbBean.groupItemSeparator}">
            <h:outputText value="Group1.1"></h:outputText>
            <h:outputText value="Group1.2"></h:outputText>
            <h:outputText value="Group1.3"></h:outputText>
        </rich:toolBarGroup>
        <rich:toolBarGroup itemSeparator="#{tbBean.groupItemSeparator}">
            <h:outputText value="Group2.1"></h:outputText>
            <h:outputText value="Group2.2"></h:outputText>
        </rich:toolBarGroup>
        <rich:toolBarGroup location="right"   itemSeparator="#{tbBean.groupItemSeparator}">
            <h:outputText value="Group3.1"></h:outputText>
            <h:outputText value="Group3.2"></h:outputText>
        </rich:toolBarGroup>
    </rich:toolBar>


</ui:composition>

<<Hide Source