Skip to main content

Page bar

Page bar keeps a primary action in view as a user scrolls down the page. It can also be used for way finding, by calling out which product or service the page is about, and also providing navigational links for quick access.

Example

Please click "Preview" link below to see example

Best practices

The Page bar is a region for UX elements with high experiential priority. In other words, it brings certain components to the forefront of the user's experience to drive them towards a particular action (through the call to action) or to help them navigate the page and site.

Do

  • Use the appropriate configuration for the right scenario. For example, a buy box page bar works well when on a product page, but would not be appropriate for a device family landing page.
  • Keep the navigation links concise and meaningful for the product or service.
  • Remember that this is a region for high priority items only and should be used judiciously because of the amount of persistent real estate used on the screen.

Don’t

  • Don't use the Page bar for other purposes outside of a buy box, navigation or in-page navigation control. It is not meant for alerts or promotions.

Also known as

Persistent page action
Sticky header

Related

Call to action
Heading
Hyperlink

Specifications

Supported in the following browser versions: IE10+, Edge, Safari, Firefox, and Chrome

Development

  • Schema definition: The page-bar schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

In page navigation

<div data-grid="col-12" class="m-page-bar" id="in-page">
    <div>
        <div>
            <div class="context-menu">
                <h3 class="c-heading-6">Heading</h3>
                <ul class="c-list f-bare">
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                </ul>
                <div class="c-select-menu">
                    <a href="#" role="button" aria-expanded="false">Hyperlink list</a>
                    <ul id="hyperlink-list-1" role="menu" class="c-menu" aria-hidden="true">
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="true" role="menuitem" href="#">Hyperlink</a>
                        </li>
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="false" role="menuitem" href="#">Hyperlink</a>
                        </li>
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="false" role="menuitem" href="#">Hyperlink</a>
                        </li>
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="false" role="menuitem" href="#">Hyperlink</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</div>

Preview

Buy box

<div itemscope itemtype="https://schema.org/Product" data-grid="col-12" class="m-page-bar f-hidden" id="buy-box">
    <div>
        <div>
            <div>
                <h3 class="c-heading-6">Heading - Subheading</h3>
            </div>
            <div>
                <a href="#" class="c-hyperlink">Hyperlink</a>
            </div>
        </div>
    </div>
    <div>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
        <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="priceCurrency" content="USD">
            <span>$</span>
            <span itemprop="price">1,000</span>
            <link itemprop="availability" href="http://schema.org/InStock">
        </div>
    </div>
</div>

Preview

Link navigation

<div data-grid="col-12" class="m-page-bar" id="link-nav">
    <div>
        <div>
            <div class="context-menu">
                <h3 class="c-heading-6">Heading</h3>
                <ul class="c-list f-bare">
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                    <li>
                        <a href="#" class="c-hyperlink">Hyperlink</a>
                    </li>
                </ul>
                <div class="c-select-menu">
                    <a href="#" role="button" aria-expanded="false">Hyperlink list</a>
                    <ul id="hyperlink-list-1" role="menu" class="c-menu" aria-hidden="true">
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="true" role="menuitem" href="#">Hyperlink</a>
                        </li>
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="false" role="menuitem" href="#">Hyperlink</a>
                        </li>
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="false" role="menuitem" href="#">Hyperlink</a>
                        </li>
                        <li class="c-menu-item" role="presentation">
                            <a aria-checked="false" role="menuitem" href="#">Hyperlink</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div>
        <a href="#" class="c-call-to-action c-glyph">
            <span>CALL TO ACTION</span>
        </a>
    </div>
</div>

Preview