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-31629">
<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-19842">
<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-19842" 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-19842" 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 referenceProduct Logo
Optionally, product identity may be expressed as a logo image. The identity links to the product’s main page.
Streaming Plus
<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-44674">
<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-355">
<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-355" 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-355" 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
Math Techbook
<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-42656">
<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-78301">
<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-78301" 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-78301" 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 referenceBreadcrumb
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-65409">
<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-18041">
<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-18041" 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-18041" 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
Science Techbook
<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-55771">
<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-34138">
<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-34138" 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-34138" 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
Social Studies Techbook
<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-25090">
<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-22360">
<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-22360" 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-22360" 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 referenceLegacy
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-98278">
<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-98278" 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-98278" 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 referenceHomepage
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.
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-35776">
<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-18070">
<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-18070" 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-18070" 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 referenceProduct-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--primaryor.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.
Science Techbook
<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-84877">
<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-84877" 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-84877" 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 referenceTransparency
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).
Semi-Transparent
<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-33855">
<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-28313">
<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-28313" 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-28313" 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 referenceTransparent (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.
Transparent
<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-50661">
<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-23092">
<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-23092" 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-23092" 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 referenceGradient
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.
Gradient
<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-79369">
<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-10733">
<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-10733" 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-10733" 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 referenceContent 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-73022">
<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-54186">
<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-54186" 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-54186" 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 referenceSearch
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-46333">
<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-74719">
<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-74719" 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-74719" 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 referenceOptional 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-78730">
<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-53691">
<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-53691" 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-53691" 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 referenceGuidelines
- 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
-
Use a crisp, legible, logotype 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.
-
Use a reversible logo with strong contrast on both light and dark backgrounds.
-
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.
Breadcrumb
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 |
|---|---|
|
|
Changes top border to Science Techbook's theme color |
|
|
Changes top border to Math Techbook's theme color |
|
|
Changes top border to Social Studies Techbook's theme color |
|
|
Changes top border to Streaming Plus's theme color |
|
|
Keeps the Discovery "D" Logo visible on wide viewports |
|
|
Reduces the background opacity of the Product Bar to 25%. |
|
|
Reduces the background opacity of the Product Bar to 75%. |
|
|
Fades the background opacity of the Product Bar from 100% to 0% top-to-bottom. |
|
|
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, |
|
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 |
|
class |
false (default) or string |
Space separated classes added to the |
|
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 |
|
product_title |
false (default) or string |
Sets the Product Title, special strings of |
|
product_title_href |
string |
Sets the |