rich:menuSeparator

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

## 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/>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlMenuSeparator;
    ...
    HtmlMenuSeparator myMenuSeparator = new HtmlMenuSeparator();
    ...

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

## Skin Parameters Redefinition

Skin parameters redefinition for an item

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

## Definition of Custom Style Classes

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

Classes names

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:

Redefinition styles with predefined classes

In the example a menu separator border color was changed.

## Relevant Resources Links

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