### 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.8.5. < rich:menuSeparator > available since 3.0.0

expand all

#### 6.8.5.1. Description

The <rich:menuSeparator> component is used for the definition of a horizontal separator that can be placed between groups or items.

Figure 6.102. <rich:menuSeparator> component

Table 6.162. rich : menuSeparator attributes

Attribute Name | Description
--- | ---
binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean
id | JSF: Every component may have a unique id that is automatically created if omitted
rendered | JSF: If "false", this component is not rendered

Table 6.163. Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.MenuSeparator
component-class | org.richfaces.component.html.HtmlMenuSeparator
component-family | org.richfaces.DropDownMenu
renderer-type | org.richfaces.MenuSeparatorRenderer
tag-class | org.richfaces.taglib.MenuSeparatorTag

#### 6.8.5.2. Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:

    ...

    <rich:dropDownMenu/>

            ...

           <rich:menuSeparator/>

           ...

    <rich:dropDownMenu/>

    ...

#### 6.8.5.3. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlMenuSeparator;

    ...

    HtmlMenuSeparator myMenuSeparator = new HtmlMenuSeparator();

    ...

#### 6.8.5.4. Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:menuSeparator> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:menuSeparator> component

#### 6.8.5.5. Skin Parameters Redefinition

Table 6.164. Skin parameters redefinition for an item

Skin parameters | CSS properties
--- | ---
panelBorderColor | border-top-color

#### 6.8.5.6. Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Figure 6.103. Classes names

Table 6.165. Classes names that define separator element appearance.

Class name | Description
--- | ---
rich-menu-separator | Defines styles for a wrapper <div> element for a separator

In order to redefine styles for all <rich:menuSeparator> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:

    ...

    .rich-menu-separator{

            border-color: #acbece;

    }

    ...

This is a result:

Figure 6.104. Redefinition styles with predefined classes

In the example a menu separator border color was changed.

#### 6.8.5.7. Relevant Resources Links

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

- Prev6.8.4. < rich:menuItem > ...
- Top of page
- Front page
- Next6.9. Rich Trees