Menu - Steps Steps components is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.
<h3 style="margin-top:0">Basic</h3>
<p:steps>
    <p:menuitem value="Personal" />
    <p:menuitem value="Seat Selection" />
    <p:menuitem value="Payment" />
    <p:menuitem value="Confirmation" />
</p:steps>

<h3>Interactive</h3>
<p:steps activeIndex="1" styleClass="custom" readonly="false">
    <p:menuitem value="Personal" url="#"/>
    <p:menuitem value="Seat Selection" url="#"/>
    <p:menuitem value="Payment" url="#"/>
    <p:menuitem value="Confirmation" url="#"/>
</p:steps>

<style type="text/css">
.ui-steps .ui-steps-item {
    width: 24%;
}

.ui-state-highlight {
    text-shadow: none !important;
}

.ui-steps.custom {
    margin-bottom: 30px;
}

.ui-steps.custom .ui-steps-item .ui-menuitem-link {
    height: 10px;
    padding: 0 1em;
}

.ui-steps.custom .ui-steps-item .ui-steps-number {
    background-color: #0081c2;
    color: #FFFFFF;
    display: inline-block;
    width: 30px;
    border-radius: 10px;
    margin-top: -10px;
    margin-bottom: 10px;
}

.ui-steps.custom .ui-steps-item.ui-state-highlight .ui-steps-title {
    color: #555;
}
</style>
                
PrimeTek, Copyright © 2015
All rights reserved.
Running PrimeFaces-6.1-SNAPSHOT on Mojarra-2.2.8.