arya-blue
luna-amber
luna-blue
luna-green
luna-pink
nova-dark
nova-light
saga-blue
vela-blue
SlideOut
SlideOut can be used to have nice forms attached to the edge of the screen.

Click on the "Contact" tab attached to the TOP edge of the screen.

Slideout can be controlled in Javascript by its widgetVar and callback events can be registered.
Contact
If you provide your email address above, then by submitting
this form you agree that we may contact you by email
to follow up on your feedback.
Source

<pe:slideout id="slideoutContact" title="Contact" icon="pi pi-envelope" location="top" widgetVar="slideout"
        handleStyleClass="contact-handle" panelStyleClass="contact-panel" offset="450px" bounceTimes="5"
        bounceDistance="100px">
        <p:panelGrid styleClass="ui-noborder" layout="tabular" columns="0">
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtMessage" value="Message"></p:outputLabel>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputTextarea id="txtMessage" rows="5" cols="43" autoResize="false" placeholder="Send us a message if you have something to say."/>
                </p:column>
            </p:row>
            <p:row>
                <p:column styleClass="ui-widget-header">
                    <p:outputLabel for="txtEmail" value="Email address (optional)"></p:outputLabel>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:inputText id="txtEmail" size="40" placeholder="Email address (optional)"/>
                </p:column>
            </p:row>
            <p:row>
                <p:column style="font-style: italic;">
             If you provide your email address above, then by submitting<br />
             this form you agree that we may contact you by email<br />
             to follow up on your feedback.<br />
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <p:outputPanel style="text-align:right;">
                        <p:commandButton value="Send" type="button" onclick="PF('slideout').close();" />
                    </p:outputPanel>
                </p:column>
            </p:row>
        </p:panelGrid>
    </pe:slideout>

    <h:panelGroup layout="block" style="text-align:left;margin-bottom:10px;">
        <p:commandButton value="Open" type="button" onclick="PF('slideout').open();" />
        <p:commandButton value="Close" type="button" onclick="PF('slideout').close();" />
        <p:commandButton value="Toggle" type="button" onclick="PF('slideout').toggle();" />
        <p:commandButton value="Bounce" type="button" onclick="PF('slideout').bounce();" />
    </h:panelGroup>
            
Components and more
Documentation pe:slideout
Attributes (move mouse over the names to see data types)
Name Description
animateSpeedAnimation speed in ms.Default is 300.
autoOpenIf true, the panel auto opens on load.Default is false.
bindingAn EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
bounceDistanceDistance for bounce effect.Default is 50px.
bounceTimesNumber of bounces.Default is 4.
clickScreenToCloseIf true, clicking the screen closes the panel.Default is true.
handleOffsetHandle offset distance from edge.
handleOffsetReverseIf true, handle offset is reversed (align with right/bottom).Default is false.
handleStyleStyle of the handle.
handleStyleClassStyle class of the handle.
iconIcon for the handle.
idUnique identifier of the component in a namingContainer.Default is generated.
locationLocation: left, right, top or bottom.Default is right.
offsetOffset distance of the panel from the edge.Default is 200px.
offsetReverseIf true, offset is reversed (align with right/bottom).Default is false.
onbeforecloseCallback javascript executed before close.
onbeforeopenCallback javascript executed before open.
onbeforeslideCallback javascript executed before slide.
oncloseCallback javascript executed after close.
onopenCallback javascript executed after open.
onslideCallback javascript executed on slide.
panelStyleStyle of the slideout panel.
panelStyleClassStyle class of the slideout panel.
renderedBoolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
showOnShow on 'click' or 'hover'.Default is click.
stickyIf true, the panel is positioned fixed (sticky).Default is false.
titleText title of the handle.
widgetVarName of the client side widget.
PrimeFaces Extensions Showcase - © 2011-2025,PrimeFaces: 16.0.0-SNAPSHOT,PrimeFaces Extensions: 16.0.0-SNAPSHOT,JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),Build time: 2026-03-16 12:06