Skip to main content Skip to navigation

Product Bar

Product Bar sits at the top of all standard pages—part header, part breadcrumb. Identify the product, orient the user, and provide access to important tasks within the global navigation framework.

product bar product bar responsive behavior

Standard

The standard variation includes the product identity and utility action icons. See a full page example.

<div class="comet-product-bar js-comet-product-bar false comet-product-bar__search-revealed-static">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
    </a>
    <a class="comet-product-bar__product-title" href="#">
        My Content
    </a>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--search">
            <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-98216">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                </svg>
                <span class='comet-screenreader-only'>Search</span>
            </button>
            <div class="comet-product-bar__search">
                <div class="comet-product-bar__search-inner">
                    <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                        <label class="comet-screenreader-only" for="q">Search</label>
                        <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                        <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                            <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights movement</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights act</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war video</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                            <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class="comet-screenreader-only">Search</span>
                        </button>
                    </form>
                    <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                        <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                        <span class="comet-screenreader-only">Close Search</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-46580">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-46580" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-46580" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--quicklist">
            <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                </svg>
                <span class='comet-screenreader-only'>Quicklist</span>
            </a>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(product_title="My Content") }}
                
Macro params reference

Optionally, product identity may be expressed as a logo image. The identity links to the product’s main page.

<div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-streaming comet-product-bar__search-revealed-static">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
    </a>
    <a class="comet-product-bar__product-title" href="#">
        <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#streaming-plus"></use>
        </svg>
        <span class="comet-screenreader-only">streaming-plus</span>
    </a>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--search">
            <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-98986">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                </svg>
                <span class='comet-screenreader-only'>Search</span>
            </button>
            <div class="comet-product-bar__search">
                <div class="comet-product-bar__search-inner">
                    <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                        <label class="comet-screenreader-only" for="q">Search</label>
                        <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                        <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                            <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights movement</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights act</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war video</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                            <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class="comet-screenreader-only">Search</span>
                        </button>
                    </form>
                    <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                        <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                        <span class="comet-screenreader-only">Close Search</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-19421">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-19421" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-19421" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--quicklist">
            <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                </svg>
                <span class='comet-screenreader-only'>Quicklist</span>
            </a>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(product_title="streaming-plus", class="comet-product-bar--theme-product-streaming") }}
                
Macro params reference
<div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-math comet-product-bar__search-revealed-static">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
    </a>
    <a class="comet-product-bar__product-title" href="#">
        <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#math-techbook"></use>
        </svg>
        <span class="comet-screenreader-only">math-techbook</span>
    </a>
    <nav>
        <ul class="comet-product-bar__breadcrumbs">
            <li class="comet-product-bar__breadcrumb-separator">
                <svg class="comet-product-bar__breadcrumb-separator-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                </svg>
            </li>
            <li class="comet-product-bar__breadcrumb">
                <a class="comet-product-bar__breadcrumb-link" href="#link/to/geometry">
                    <span class="comet-product-bar__breadcrumb-text">
                        Geometry
                    </span>
                </a>
            </li>
        </ul>
    </nav>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--search">
            <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-56105">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                </svg>
                <span class='comet-screenreader-only'>Search</span>
            </button>
            <div class="comet-product-bar__search">
                <div class="comet-product-bar__search-inner">
                    <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                        <label class="comet-screenreader-only" for="q">Search</label>
                        <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                        <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                            <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights movement</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights act</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war video</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                            <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class="comet-screenreader-only">Search</span>
                        </button>
                    </form>
                    <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                        <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                        <span class="comet-screenreader-only">Close Search</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-89264">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-89264" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-89264" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--quicklist">
            <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                </svg>
                <span class='comet-screenreader-only'>Quicklist</span>
            </a>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(
                                product_title="math-techbook",
                                class="comet-product-bar--theme-product-math",
                                breadcrumbs=[
                                    {   text: "Geometry",
                                        href: "#link/to/geometry"
                                    }
                                ]) }}
                
Macro params reference

Optionally, a breadcrumb may be appended to the product identity to orient the user, naming and linking to intermediate levels of the product.

Responsively, the breadcrumb has a truncated mode between $comet-breakpoints-tablet-portrait and $comet-breakpoints-desktop which refers to shortened label values. If .comet-product-bar__breadcrumb-truncated-text is missing, the breadcrumb continues to display normally in this range.

<div class="comet-product-bar js-comet-product-bar">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
    </a>
    <a class="comet-product-bar__product-title" href="#">
        My Content
    </a>
    <nav>
        <ul class="comet-product-bar__breadcrumbs">
            <li class="comet-product-bar__breadcrumb-separator">
                <svg class="comet-product-bar__breadcrumb-separator-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                </svg>
            </li>
            <li class="comet-product-bar__breadcrumb">
                <a class="comet-product-bar__breadcrumb-link" href="#link/to/stem-16">
                    <span class="comet-product-bar__breadcrumb-text">
                        STEM 16
                    </span>
                </a>
            </li>
            <li class="comet-product-bar__breadcrumb-separator">
                <svg class="comet-product-bar__breadcrumb-separator-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                </svg>
            </li>
            <li class="comet-product-bar__breadcrumb">
                <a class="comet-product-bar__breadcrumb-link" href="#link/to/photos">
                    <span class="comet-product-bar__breadcrumb-text">
                        Photos
                    </span>
                </a>
            </li>
        </ul>
    </nav>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--search">
            <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-67794">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                </svg>
                <span class='comet-screenreader-only'>Search</span>
            </button>
            <div class="comet-product-bar__search">
                <div class="comet-product-bar__search-inner">
                    <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                        <label class="comet-screenreader-only" for="q">Search</label>
                        <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                        <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                            <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights movement</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights act</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war video</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                            <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class="comet-screenreader-only">Search</span>
                        </button>
                    </form>
                    <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                        <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                        <span class="comet-screenreader-only">Close Search</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-31959">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-31959" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-31959" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--quicklist">
            <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                </svg>
                <span class='comet-screenreader-only'>Quicklist</span>
            </a>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(
                            product_title="My Content",
                            breadcrumbs=[
                                {   text: "STEM 16",
                                    href: "#link/to/stem-16"
                                },
                                {
                                    text: "Photos",
                                    href:"#link/to/photos"
                                }],
                                search=false)
                        }}
                
Macro params reference
<div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-science">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
    </a>
    <a class="comet-product-bar__product-title" href="#">
        <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#science-techbook"></use>
        </svg>
        <span class="comet-screenreader-only">science-techbook</span>
    </a>
    <nav>
        <ul class="comet-product-bar__breadcrumbs">
            <li class="comet-product-bar__breadcrumb-separator">
                <svg class="comet-product-bar__breadcrumb-separator-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                </svg>
            </li>
            <li class="comet-product-bar__breadcrumb">
                <a class="comet-product-bar__breadcrumb-link" href="#link/to/physical-science">
                    <span class="comet-product-bar__breadcrumb-text">
                        Physical Science
                    </span>
                </a>
            </li>
        </ul>
    </nav>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--search">
            <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-7000">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                </svg>
                <span class='comet-screenreader-only'>Search</span>
            </button>
            <div class="comet-product-bar__search">
                <div class="comet-product-bar__search-inner">
                    <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                        <label class="comet-screenreader-only" for="q">Search</label>
                        <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                        <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                            <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights movement</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights act</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war video</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                            <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class="comet-screenreader-only">Search</span>
                        </button>
                    </form>
                    <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                        <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                        <span class="comet-screenreader-only">Close Search</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-8188">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-8188" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-8188" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--quicklist">
            <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                </svg>
                <span class='comet-screenreader-only'>Quicklist</span>
            </a>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(
                            class="comet-product-bar--theme-product-science",
                            product_title="science-techbook",
                            breadcrumbs=[
                                {   text: "Physical Science",
                                    href: "#link/to/physical-science"
                                }],
                                search=false)
                        }}
                
Macro params reference
<div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-social-studies">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
    </a>
    <a class="comet-product-bar__product-title" href="#">
        <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#social-studies-techbook"></use>
        </svg>
        <span class="comet-screenreader-only">social-studies-techbook</span>
    </a>
    <nav>
        <ul class="comet-product-bar__breadcrumbs">
            <li class="comet-product-bar__breadcrumb-separator">
                <svg class="comet-product-bar__breadcrumb-separator-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                </svg>
            </li>
            <li class="comet-product-bar__breadcrumb">
                <a class="comet-product-bar__breadcrumb-link" href="#link/to/prehistory">
                    <span class="comet-product-bar__breadcrumb-text">
                        US History
                    </span>
                </a>
            </li>
        </ul>
    </nav>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--search">
            <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-13780">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                </svg>
                <span class='comet-screenreader-only'>Search</span>
            </button>
            <div class="comet-product-bar__search">
                <div class="comet-product-bar__search-inner">
                    <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                        <label class="comet-screenreader-only" for="q">Search</label>
                        <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                        <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                            <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                <ul class="comet-list-group__list">
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights movement</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil rights act</span>
                                        </a>
                                    </li>
                                    <li class="comet-list-group__row">
                                        <a class="comet-list-group__row-anchor" href="#">
                                            <span class="comet-list-group__row-label">civil war video</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                            <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                            </svg>
                            <span class="comet-screenreader-only">Search</span>
                        </button>
                    </form>
                    <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                        <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                        </svg>
                        <span class="comet-screenreader-only">Close Search</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-58065">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-58065" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-58065" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--quicklist">
            <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                </svg>
                <span class='comet-screenreader-only'>Quicklist</span>
            </a>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(
                                class="comet-product-bar--theme-product-social-studies",
                                product_title="social-studies-techbook",
                                breadcrumbs=[
                                    {   text: "US History",
                                        href: "#link/to/prehistory"
                                    }],
                                search=false)
                        }}
                
Macro params reference

Legacy

Optionally, legacy applications that are hard to modify or slated for retirement may use this simplified variation of the product bar.

  • Never customize the legacy variation.
  • Always display all elements: My DE home button, product identity breadcrumb, and profile button.
<div class="comet-product-bar js-comet-product-bar comet-product-bar--legacy comet-product-bar__search-revealed-static">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        <span class="comet-global-brand-logo--hover-state">
            <svg class="comet-global-brand-logo--hover-state-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#home"></use>
            </svg>
            Home
        </span>
    </a>
    <a class="comet-product-bar__product-title" href="#">
        Health
    </a>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-88315">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-88315" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-88315" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(
                                class="comet-product-bar--legacy",
                                product_title="Health",
                                legacy="true",
                                actions=[
                                    {
                                        text: "Profile",
                                        icon: "profile"
                                    }])
                        }}
                
Macro params reference

Homepage

The My DE page for all user roles displays a unique variation of the product bar that lacks a breadcrumb.

  • The Homepage variation has the standard white background on narrow viewports, below 768px width.

My DE Homepage Product Bar Figure: My DE Homepage Product Bar

  • Never use the homepage variation on other pages.
  • Use one of two settings – 25% opacity background color or 100% opacity gradient – depending on the visual style of the hero component.
  • Omit breadcrumb and product identity, irrelevant on a homepage.
<div class="comet-doc-product-bar-demo-wrap">
    <div class="comet-product-bar js-comet-product-bar comet-product-bar--gradient comet-product-bar__search-revealed-static">
        <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
            <span class="comet-screenreader-only">View Navigation</span>
            <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
            <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        </a>
        <ul class="comet-product-bar__actions">
            <li class="comet-product-bar__action comet-product-bar__action--search">
                <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-50776">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Search</span>
                </button>
                <div class="comet-product-bar__search">
                    <div class="comet-product-bar__search-inner">
                        <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                            <label class="comet-screenreader-only" for="q">Search</label>
                            <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                            <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                    <ul class="comet-list-group__list">
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights movement</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights act</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war video</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                </svg>
                                <span class="comet-screenreader-only">Search</span>
                            </button>
                        </form>
                        <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close Search</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--profile">
                <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-76585">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Show Profile</span>
                </button>
                <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-76585" data-comet-popover-align="left">
                    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <div class="comet-product-bar__profile-dropdown-header">
                            <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                            <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-76585" href="#">
                                <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                </svg>
                                <span class="comet-screenreader-only">Close</span>
                            </a>
                        </div>
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                    <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                    <span class="comet-list-group__row-label">
                                        <span class="comet-product-bar__view-profile-name-text">
                                            Aleksandr Romanov Kuznetsov
                                        </span>
                                        <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Help
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        My Admin
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Logout
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                    <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Quicklist</span>
                </a>
            </li>
        </ul>
    </div>
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/my_de_homepage_demo.png" />
</div>
                
<div class="comet-doc-product-bar-demo-wrap">
    {{ comet.product_bar(class="comet-product-bar--gradient") }}
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/my_de_homepage_demo.png"/>
</div>
                
Macro params reference

Product-Specific Actions

Optionally, products may add key action buttons to the product bar.

  • Include up to one primary product-specific action that uses a label, icon, or both.
  • Include up to one secondary product-specific action that uses an icon only.
  • Style custom actions using .comet-button--small: .comet-button--primary or .comet-button--flat.
  • Position custom actions to the left of utility actions, separated using the default separator.
  • Test responsive views if using product-specific actions and a breadcrumb together.
  • On small screens, provide an alternative placement for these actions within the product UI. They are hidden on Product Bar below viewport width 768px.
<div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-science comet-product-bar__search-revealed-static">
    <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
        <span class="comet-screenreader-only">View Navigation</span>
        <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
        <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
    </a>
    <a class="comet-product-bar__product-title" href="#">
        <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
            <use xlink:href="/comet/comet_assets/comet.svg#science-techbook"></use>
        </svg>
        <span class="comet-screenreader-only">science-techbook</span>
    </a>
    <ul class="comet-product-bar__actions">
        <li class="comet-product-bar__action comet-product-bar__action--separator-after-small comet-product-bar__action--switch-course">
            <a class="comet-button comet-product-bar__action-link comet-button--small comet-button--primary comet-button--small comet-product-bar__action-link--secondary" role="button" href="#">
                <span class='comet-button--icon__text'>Switch Course</span>
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#caret-down"></use>
                </svg>
            </a>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--separator-after-large comet-product-bar__action--add-something">
            <a class="comet-button comet-product-bar__action-link comet-button--small comet-product-bar__action-link--secondary" role="button" href="#">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#add-point"></use>
                </svg>
                <span class='comet-screenreader-only'>Add Something</span>
            </a>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--quicklist">
            <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#">
                <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                </svg>
                <span class='comet-screenreader-only'>Quicklist</span>
            </a>
        </li>
        <li class="comet-product-bar__action comet-product-bar__action--profile">
            <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-38984">
                <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                </svg>
                <span class='comet-screenreader-only'>Show Profile</span>
            </button>
            <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-38984" data-comet-popover-align="left">
                <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                    <div class="comet-product-bar__profile-dropdown-header">
                        <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                        <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-38984" href="#">
                            <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close</span>
                        </a>
                    </div>
                    <ul class="comet-list-group__list">
                        <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                            <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                <span class="comet-list-group__row-label">
                                    <span class="comet-product-bar__view-profile-name-text">
                                        Aleksandr Romanov Kuznetsov
                                    </span>
                                    <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Help
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    My Admin
                                </span>
                            </a>
                        </li>
                        <li class="comet-list-group__row">
                            <a class="comet-list-group__row-anchor" href="#">
                                <span class="comet-list-group__row-label">
                                    Logout
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</div>
                
{{ comet.product_bar(
                            class="comet-product-bar--theme-product-science",
                            product_title="science-techbook",
                            actions=[
                                {
                                    text: "Switch Course",
                                    icon: "caret-down",
                                    icon_position: "right",
                                    display_text: true,
                                    class: "comet-button--primary comet-button--small comet-product-bar__action-link--secondary",
                                    separator_after: "small"
                                },
                                {
                                    text: "Add Something",
                                    icon: "add-point",
                                    class: "comet-product-bar__action-link--secondary",
                                    separator_after: "large"
                                },
                                {   text: "Quicklist",
                                    icon: "bookmark",
                                    has_panel: true
                                },
                                {
                                    text: "Profile",
                                    href:"#link/to/profile",
                                    icon: "profile"
                                }])
                        }}
                
Macro params reference

Transparency

Three variations of the Product Bar component enable the top of the page content to show through the bar, particularly for highly visual pages leading with a photograph.

Semi-Transparent (75% Opacity)

Use Semi-Transparent on lighter or busier photographs that need a boost in contrast.

  • Semi-Transparent moderately increases the contrast of product bar’s text (“Search”) and icon actions (like Profile).
<div class="comet-doc-product-bar-demo-wrap">
    <div class="comet-product-bar js-comet-product-bar comet-product-bar--semi-transparent comet-product-bar__search-revealed-static">
        <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
            <span class="comet-screenreader-only">View Navigation</span>
            <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
            <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        </a>
        <a class="comet-product-bar__product-title" href="#">
            Search
        </a>
        <ul class="comet-product-bar__actions">
            <li class="comet-product-bar__action comet-product-bar__action--search">
                <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-37513">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Search</span>
                </button>
                <div class="comet-product-bar__search">
                    <div class="comet-product-bar__search-inner">
                        <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                            <label class="comet-screenreader-only" for="q">Search</label>
                            <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                            <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                    <ul class="comet-list-group__list">
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights movement</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights act</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war video</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                </svg>
                                <span class="comet-screenreader-only">Search</span>
                            </button>
                        </form>
                        <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close Search</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--profile">
                <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-66861">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Show Profile</span>
                </button>
                <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-66861" data-comet-popover-align="left">
                    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <div class="comet-product-bar__profile-dropdown-header">
                            <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                            <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-66861" href="#">
                                <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                </svg>
                                <span class="comet-screenreader-only">Close</span>
                            </a>
                        </div>
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                    <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                    <span class="comet-list-group__row-label">
                                        <span class="comet-product-bar__view-profile-name-text">
                                            Aleksandr Romanov Kuznetsov
                                        </span>
                                        <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Help
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        My Admin
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Logout
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                    <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Quicklist</span>
                </a>
            </li>
        </ul>
    </div>
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/science_product_bar_demo.png" />
</div>
                
<div class="comet-doc-product-bar-demo-wrap">
    {{ comet.product_bar(
        class="comet-product-bar--semi-transparent",
        product_title="Search")
    }}
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/science_product_bar_demo.png"/>
</div>
                
Macro params reference

Transparent (25% Opacity)

Use Transparent on smoother, darker photographs for a small increase in contrast.

  • Transparent slightly increases the contrast of product bar’s foreground elements.
<div class="comet-doc-product-bar-demo-wrap">
    <div class="comet-product-bar js-comet-product-bar comet-product-bar--transparent comet-product-bar__search-revealed-static">
        <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
            <span class="comet-screenreader-only">View Navigation</span>
            <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
            <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        </a>
        <a class="comet-product-bar__product-title" href="#">
            Search
        </a>
        <ul class="comet-product-bar__actions">
            <li class="comet-product-bar__action comet-product-bar__action--search">
                <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-40808">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Search</span>
                </button>
                <div class="comet-product-bar__search">
                    <div class="comet-product-bar__search-inner">
                        <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                            <label class="comet-screenreader-only" for="q">Search</label>
                            <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                            <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                    <ul class="comet-list-group__list">
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights movement</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights act</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war video</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                </svg>
                                <span class="comet-screenreader-only">Search</span>
                            </button>
                        </form>
                        <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close Search</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--profile">
                <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-74438">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Show Profile</span>
                </button>
                <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-74438" data-comet-popover-align="left">
                    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <div class="comet-product-bar__profile-dropdown-header">
                            <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                            <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-74438" href="#">
                                <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                </svg>
                                <span class="comet-screenreader-only">Close</span>
                            </a>
                        </div>
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                    <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                    <span class="comet-list-group__row-label">
                                        <span class="comet-product-bar__view-profile-name-text">
                                            Aleksandr Romanov Kuznetsov
                                        </span>
                                        <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Help
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        My Admin
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Logout
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                    <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Quicklist</span>
                </a>
            </li>
        </ul>
    </div>
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/science_product_bar_demo.png" />
</div>
                
<div class="comet-doc-product-bar-demo-wrap">
    {{ comet.product_bar(
        class="comet-product-bar--transparent",
        product_title="Search")
    }}
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/science_product_bar_demo.png"/>
</div>
                
Macro params reference

Gradient

Use on lighter or busier photographs that need a boost in contrast.

  • Gradient moderately increases the contrast of product bar’s foreground elements.
  • The art direction on some components already calls for a gradient overlay. Avoid conflicting or redundant gradients.
<div class="comet-doc-product-bar-demo-wrap">
    <div class="comet-product-bar js-comet-product-bar comet-product-bar--gradient comet-product-bar__search-revealed-static">
        <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
            <span class="comet-screenreader-only">View Navigation</span>
            <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
            <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        </a>
        <a class="comet-product-bar__product-title" href="#">
            Search
        </a>
        <ul class="comet-product-bar__actions">
            <li class="comet-product-bar__action comet-product-bar__action--search">
                <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-12705">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Search</span>
                </button>
                <div class="comet-product-bar__search">
                    <div class="comet-product-bar__search-inner">
                        <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                            <label class="comet-screenreader-only" for="q">Search</label>
                            <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                            <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                    <ul class="comet-list-group__list">
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights movement</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights act</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war video</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                </svg>
                                <span class="comet-screenreader-only">Search</span>
                            </button>
                        </form>
                        <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close Search</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--profile">
                <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-82292">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Show Profile</span>
                </button>
                <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-82292" data-comet-popover-align="left">
                    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <div class="comet-product-bar__profile-dropdown-header">
                            <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                            <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-82292" href="#">
                                <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                </svg>
                                <span class="comet-screenreader-only">Close</span>
                            </a>
                        </div>
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                    <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                    <span class="comet-list-group__row-label">
                                        <span class="comet-product-bar__view-profile-name-text">
                                            Aleksandr Romanov Kuznetsov
                                        </span>
                                        <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Help
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        My Admin
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Logout
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                    <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Quicklist</span>
                </a>
            </li>
        </ul>
    </div>
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/science_product_bar_demo.png" />
</div>
                
<div class="comet-doc-product-bar-demo-wrap">
    {{ comet.product_bar(
        class="comet-product-bar--gradient",
        product_title="Search")
    }}
    <img class="comet-doc-product-bar-demo-wrap__image" src="/images/components/product-bar/science_product_bar_demo.png"/>
</div>
                
Macro params reference

Content Rules for Transparent Product Bars

  • Plan for the first content component to appear partially “behind” the Product Bar, showing through it.
  • Avoid text or interactive elements in the the top 75px of the content component, since these will overlap with the Product Bar.
  • Test with candidate photographs to validate that the bar has sufficient contrast with foreground elements. The text is $comet-color-white, but the icons are $comet-color-neutral-80.

Profile Panel

All versions of the product bar give access to the profile panel, which contains core account functions, such as logging out and viewing the account profile.

  • The profile panel is exclusively for global functions, such as the Log Out action.
  • Individual products should not add items to the profile panel
<div class="comet-doc-product-bar-demo-wrap-tall">
    <div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-streaming comet-product-bar__search-revealed-static">
        <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
            <span class="comet-screenreader-only">View Navigation</span>
            <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
            <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        </a>
        <a class="comet-product-bar__product-title" href="#">
            <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#streaming-plus"></use>
            </svg>
            <span class="comet-screenreader-only">streaming-plus</span>
        </a>
        <ul class="comet-product-bar__actions">
            <li class="comet-product-bar__action comet-product-bar__action--search">
                <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-29517">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Search</span>
                </button>
                <div class="comet-product-bar__search">
                    <div class="comet-product-bar__search-inner">
                        <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                            <label class="comet-screenreader-only" for="q">Search</label>
                            <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                            <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                    <ul class="comet-list-group__list">
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights movement</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights act</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war video</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                </svg>
                                <span class="comet-screenreader-only">Search</span>
                            </button>
                        </form>
                        <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close Search</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--profile">
                <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-85625">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Show Profile</span>
                </button>
                <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-85625" data-comet-popover-align="left">
                    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <div class="comet-product-bar__profile-dropdown-header">
                            <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                            <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-85625" href="#">
                                <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                </svg>
                                <span class="comet-screenreader-only">Close</span>
                            </a>
                        </div>
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                    <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                    <span class="comet-list-group__row-label">
                                        <span class="comet-product-bar__view-profile-name-text">
                                            Aleksandr Romanov Kuznetsov
                                        </span>
                                        <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Help
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        My Admin
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Logout
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                    <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Quicklist</span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
<div class="comet-doc-product-bar-demo-wrap-tall">
    {{ comet.product_bar(product_title="streaming-plus", class="comet-product-bar--theme-product-streaming") }}
</div>
                
Macro params reference

The standard and product logo versions of the product bar have a search box on large screens by default.

  • On small screens, search is collapsed into an icon. Clicking/tapping the search icon reveals the search box.
  • There is a product-level option to collapse the search box into an icon. The icon expands into the search box, much like on small screens.

See full page example.

<div class="comet-doc-product-bar-demo-wrap-tall">
    <div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-streaming comet-product-bar__search-revealed-static">
        <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
            <span class="comet-screenreader-only">View Navigation</span>
            <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
            <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        </a>
        <a class="comet-product-bar__product-title" href="#">
            <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#streaming-plus"></use>
            </svg>
            <span class="comet-screenreader-only">streaming-plus</span>
        </a>
        <ul class="comet-product-bar__actions">
            <li class="comet-product-bar__action comet-product-bar__action--search">
                <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-50873">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Search</span>
                </button>
                <div class="comet-product-bar__search">
                    <div class="comet-product-bar__search-inner">
                        <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                            <label class="comet-screenreader-only" for="q">Search</label>
                            <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                            <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                    <ul class="comet-list-group__list">
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights movement</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights act</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war video</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                </svg>
                                <span class="comet-screenreader-only">Search</span>
                            </button>
                        </form>
                        <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close Search</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--profile">
                <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-54806">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Show Profile</span>
                </button>
                <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-54806" data-comet-popover-align="left">
                    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <div class="comet-product-bar__profile-dropdown-header">
                            <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                            <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-54806" href="#">
                                <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                </svg>
                                <span class="comet-screenreader-only">Close</span>
                            </a>
                        </div>
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                    <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                    <span class="comet-list-group__row-label">
                                        <span class="comet-product-bar__view-profile-name-text">
                                            Aleksandr Romanov Kuznetsov
                                        </span>
                                        <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Help
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        My Admin
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Logout
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                    <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Quicklist</span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
<div class="comet-doc-product-bar-demo-wrap-tall">
    {{ comet.product_bar(product_title="streaming-plus", class="comet-product-bar--theme-product-streaming") }}
</div>
                
Macro params reference

Optional Search Icon

The optional search icon is consistent with the small-screen default, but appears at all viewport sizes.

  • Use consistently throughout a product or tool.
  • Use in products with long breadcrumb values.
  • To avoid conflict on moderate viewports, the search box reveal may suppress the breadcrumb.
<div class="comet-doc-product-bar-demo-wrap-tall">
    <div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-streaming">
        <a class="comet-product-bar__global-brand js-comet-product-bar__show-global-nav-bar" href="#comet-navigation">
            <span class="comet-screenreader-only">View Navigation</span>
            <img class="comet-global-brand-logo" src="/comet/comet_assets/images/de-logo-sm-black.png" alt="Discovery Education Logo">
            <img class="comet-global-brand-logo comet-global-brand-logo--dark-background" src="/comet/comet_assets/images/de-logo-sm.png" alt="Discovery Education Logo">
        </a>
        <a class="comet-product-bar__product-title" href="#">
            <svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
                <use xlink:href="/comet/comet_assets/comet.svg#streaming-plus"></use>
            </svg>
            <span class="comet-screenreader-only">streaming-plus</span>
        </a>
        <ul class="comet-product-bar__actions">
            <li class="comet-product-bar__action comet-product-bar__action--search">
                <button class="comet-button comet-button--small comet-product-bar__action-link js-comet-product-bar__toggle-search comet-button--icon-only" data-comet-popover="comet-product-bar__search-panel-78287">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Search</span>
                </button>
                <div class="comet-product-bar__search">
                    <div class="comet-product-bar__search-inner">
                        <form class="comet-product-bar__search-box-wrapper" autocomplete="off">
                            <label class="comet-screenreader-only" for="q">Search</label>
                            <input class="comet-form__input comet-product-bar__search-input comet-dropdown-trigger js-comet-dropdown-trigger" type="text" placeholder="Search" data-comet-popover='search-autosuggest' haspopup='true' name="q" id="q">
                            <div class="comet-dropdown-menu comet-popover comet-popover--bottom-left-aligned" id="search-autosuggest" data-comet-popover-align="left">
                                <div class="comet-list-group comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                                    <ul class="comet-list-group__list">
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights movement</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil rights act</span>
                                            </a>
                                        </li>
                                        <li class="comet-list-group__row">
                                            <a class="comet-list-group__row-anchor" href="#">
                                                <span class="comet-list-group__row-label">civil war video</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <button class="comet-button comet-button--icon-only comet-product-bar__search-button">
                                <svg class="comet-button__icon comet-button__icon--left" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#search"></use>
                                </svg>
                                <span class="comet-screenreader-only">Search</span>
                            </button>
                        </form>
                        <a href="#" class="comet-button comet-button--small comet-product-bar__action-link comet-button--icon-only js-comet-product-bar__toggle-search comet-product-bar__close-search">
                            <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                                <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                            </svg>
                            <span class="comet-screenreader-only">Close Search</span>
                        </a>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--profile">
                <button class="comet-button comet-button--small comet-product-bar__action-link comet-dropdown-trigger js-comet-dropdown-trigger comet-button--icon-only" data-comet-popover="comet-product-bar__dropdown-menu--profile-34514">
                    <svg class="comet-product-bar__action-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#profile"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Show Profile</span>
                </button>
                <div class="comet-product-bar__profile-dropdown comet-dropdown-menu comet-popover comet-popover--bottom-right-aligned" id="comet-product-bar__dropdown-menu--profile-34514" data-comet-popover-align="left">
                    <div class="comet-list-group comet-theme--dark-background comet-dropdown-menu__list-group comet-list-group--no-hairlines">
                        <div class="comet-product-bar__profile-dropdown-header">
                            <h3 class="comet-product-bar__profile-dropdown-header-title">Account</h3>
                            <a class="comet-product-bar__profile-dropdown-header-close js-comet-dropdown-trigger" data-comet-popover="comet-product-bar__dropdown-menu--profile-34514" href="#">
                                <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                </svg>
                                <span class="comet-screenreader-only">Close</span>
                            </a>
                        </div>
                        <ul class="comet-list-group__list">
                            <li class="comet-list-group__row comet-product-bar__profile-dropdown-name-row">
                                <a class="comet-list-group__row-anchor" href="#href.goes.here.html">
                                    <img src="/images/components/list-group/kevin.png" alt="Kevin" class="comet-list-group__avatar">
                                    <span class="comet-list-group__row-label">
                                        <span class="comet-product-bar__view-profile-name-text">
                                            Aleksandr Romanov Kuznetsov
                                        </span>
                                        <span class="comet-product-bar__view-profile-link-text">View Profile</span>
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Help
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        My Admin
                                    </span>
                                </a>
                            </li>
                            <li class="comet-list-group__row">
                                <a class="comet-list-group__row-anchor" href="#">
                                    <span class="comet-list-group__row-label">
                                        Logout
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <li class="comet-product-bar__action comet-product-bar__action--quicklist">
                <a class="comet-button comet-product-bar__action-link comet-button--small js-comet-product-bar__toggle-panel" role="button" href="#path-to-quicklist">
                    <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#bookmark"></use>
                    </svg>
                    <span class='comet-screenreader-only'>Quicklist</span>
                </a>
            </li>
        </ul>
    </div>
</div>
                
<div class="comet-doc-product-bar-demo-wrap-tall">
    {{ comet.product_bar(product_title="streaming-plus", class="comet-product-bar--theme-product-streaming", search=false) }}
</div>
                
Macro params reference

Guidelines

  • Product bar is a required component within the global navigation framework.

Visual Style

  • Avoid style customization not already incorporated into the component to maintain visual coherence across products.
  • Customize visual style with built-in options for border color, background opacity, product identity logo, action buttons, and breadcrumbs.
  • Theme your product by applying a stroke color above the bar that overrides the default “platform” blue.

Product Identity

Only use product logos that are logotype with a legible product name

  • Do Image

    Use a crisp, legible, logotype image.

  • Do Image

    Use an illustration or glyph illegible at small size (100px by 55px).

Only use product logos that have high contrast with both of the Product Bar’s background colors.

  • Do Image

    Use a reversible logo with strong contrast on both light and dark backgrounds.

  • Do Image

    Use a logo with poor contrast that lacks a reverse option.

  • In large viewports, the logo will appear in white on a dark background.
  • In small viewports, the logo will appear in color on a white background.

Use When

  • Products require hierarchy revealed in a multi-level breadcrumb.
  • Very deep or verbose products, such as Techbook, can customize and extend the breadcrumb logic and presentation, or move the breadcrumb out of the Product Bar entirely.

Editorial

The standard Product Bar breadcrumb follows these rules. Use these rules as a starting point for customization.

  • Include no more than two breadcrumb levels in addition to a product name or logo. Products with more levels of hierarchy can include in-page constructs (tabs, local navigation, and more) and align their hierarchy choices with the breadcrumbs displayed in the product bar.
  • Minimize product identity width to < 100px for a logo or 12 characters for a text label.
  • Omit a breadcrumb level to allow for a longer name. 64 characters is the overall maximum for levels 2 and 3. Shorter is better.
  • The second and third levels combined may have a maximum of 60 characters.
  • If automatically truncating breadcrumb labels, include an ellipse (…). Prefer editorial shortening.
  • Avoid user-generated values in the breadcrumb labels. For example, My Content’s hierarchy of folder names are unpredictably too long for a breadcrumb.
  • Products must chose between these breadcrumb limits and using the exposed search box at small tablet sizes. The two elements conflict, so when the user reveals search, hide the breadcrumb.

Class Reference

The modifier classes below are added to the root div.comet-product-bar element.

Class Outcome

.comet-product-bar--theme-product-science

Changes top border to Science Techbook's theme color

.comet-product-bar--theme-product-math

Changes top border to Math Techbook's theme color

.comet-product-bar--theme-product-social-studies

Changes top border to Social Studies Techbook's theme color

.comet-product-bar--theme-product-streaming

Changes top border to Streaming Plus's theme color

.comet-product-bar--legacy

Keeps the Discovery "D" Logo visible on wide viewports

.comet-product-bar--transparent

Reduces the background opacity of the Product Bar to 25%.
Also adds a negative bottom margin to "pull content up" underneath the Product Bar

.comet-product-bar--semi-transparent

Reduces the background opacity of the Product Bar to 75%.
Also adds a negative bottom margin to "pull content up" underneath the Product Bar

.comet-product-bar--gradient

Fades the background opacity of the Product Bar from 100% to 0% top-to-bottom.
Also adds a negative bottom margin to "pull content up" underneath the Product Bar

.comet-product-bar__search-revealed-static

Reveals the search box on tablet and larger viewports, which is the default behavior. Removing this class causes the searchbox to collapse into an action icon. On small viewports, revealing search toggles the breadcrumb to hide.

Macro Params Reference

Param Values Description

actions

false or array of objects (default)

An array of objects that represent the links in the right side of the product bar. See the Product-Specific Actions section for an example. The default links are Search, Quicklist, and Profile.

search

false (default) or string

To reveal the search box by default on tablet and desktop viewport sizes, search='input'. This suppresses the default search icon in the actions area.

back_link

url string or false (default)

If provided this triggers the display of the left caret as shown in the Legacy example

breadcrumbs

array of objects or false (default)

If provided this triggers the display of breadcrumbs as shown in the Breadcrumb examples. Accepts sub-params href, text, truncated_text (optional).

class

false (default) or string

Space separated classes added to the div.comet-product-bar element

icon_path

false (default) or string

Overrides the path to the icon sprite for all the icons within the Product Bar

navigation_anchor_link

string, (default: '#comet-navigation')

Sets the href attribute for the "D" logo, overridden when back_link is provided. Useful for progressive enhancement

product_title

false (default) or string

Sets the Product Title, special strings of math-techbook, science-techbook, social-studies-techbook and streaming-plus will trigger display of those products' SVG logos

product_title_href

string

Sets the href attribute for the Product Title

Navigation Menu