6.10.17. < rich:toolBar > available since 3.0.0

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.10.17. < rich:toolBar > available since 3.0.0

expand all

#### 6.10.17.1. Description

A horizontal bar with Action items on it that accepts any JSF components as children.

Figure 6.108. <rich:toolBar> with action items

#### 6.10.17.2. Key Features

- Skinnable menu panel and child items

- Standard top menu bar that can be used in accordance with a menu component

- Grouping bar content

- Easily place content on any side of a menu bar using predefined group layout

- Predefined separators for menu items and groups

- Any content inside

#### 6.10.17.3. Details of Usage

A toolBar is a wrapper component that facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with possibility to group, arrange on the both bar sides, and place predefined separators between them.

Grouping and an input side definition is described for toolBarGroup that defines this functionality.

Separators are located between components with the help of the "itemSeparator" attribute with four predefined values:

- "none"

- "line"

- "square"

- "disc"

For example, when setting a separator of a disc type, the following result is produced:

Figure 6.109. <rich:toolBar> with a "disc" separator

Moreover, for toolBar style "width" and "height" attributes are placed above all.

A custom separator can be added with the help of "itemSeparator" facet.

Example:

    ...

    <f:facet name="itemSeparator">

        <rich:separator width="2" height="14" />

    </f:facet>

    ...

Custom separator can be also specified by URL to the separator image in the attribute "itemSeparator" of the <rich:toolBar> .

Example:

    ...

    <rich:toolBar id="toolBar" width="#{bean.width}" height="#{bean.height}" itemSeparator="/images/separator_img.jpg"/>

    ...

This is a result:

Figure 6.110. <rich:toolBar> with "itemSeparator" attribute.

#### 6.10.17.4. Reference Data

Table of <rich:toolBar> attributes.

Table 6.154. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.ToolBar
component-class | org.richfaces.component.html.HtmlToolBar
component-family | org.richfaces.ToolBar
renderer-type | org.richfaces.ToolBarRenderer
tag-class | org.richfaces.taglib.ToolBarTag

Table 6.155. Facets

Facet name | Description
--- | ---
itemSeparator | Defines the custom separator. Related attribute is "itemSeparator"

Table 6.156. Classes names that define a component appearance

Class name | Description
--- | ---
rich-toolbar | Defines styles for a toolbar element
rich-toolbar-item | Defines styles for a toolbar item

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.10.17.5. Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:toolBar> usage and sources for the given example.

- Prev6.10.16. < rich:toggleControl > ...
- Top of page
- Front page
- Next6.10.18. < rich:toolBarGroup > ...