Skip to Content Skip to Navigation

User Experience Toolkit

Pills

Pills are used for navigating between content pages.

Default Implementation

HTML:
        <a class="ux-pill active-pill" href="#">Home</a>
        <a class="ux-pill" href="#">Settings</a>
        <a class="ux-pill" href="#">Contact Us</a>
    

Pills are unusable in Internet Explorer 8 and down.

Pills are created by adding the class (.ux-pill) to an anchor (a) tag. Pills offer another style for secondary page navigation with a button like appearance.

Thanks for the feedback! It will help us improve your experience.