<h3 style="margin-top:0">Basic</h3> <a:steps> <a:menuitem value="Personal" /> <a:menuitem value="Seat Selection" /> <a:menuitem value="Payment" /> <a:menuitem value="Confirmation" /> </a:steps> <h3>Interactive</h3> <a:steps activeIndex="1" styleClass="custom" readonly="false"> <a:menuitem value="Personal" url="#"/> <a:menuitem value="Seat Selection" url="#"/> <a:menuitem value="Payment" url="#"/> <a:menuitem value="Confirmation" url="#"/> </a: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>