Skip to main content Skip to navigation

Global Nav Bar

The global nav bar sits beside all standard pages—providing navigation between services, tools, and the homepage. It displays the brand identity and works in concert with the Product Bar to orient the user.

Standard

Use this variation of global nav bar for all pages of all products.

Global Nav States Figure: Global Nav States

<a href="#mainContentAnchor" class="comet-screenreader-only comet-skiplinks">Skip to main content</a>
<a href="#mainNavAnchor" class="comet-screenreader-only comet-skiplinks">Skip to navigation</a>
<div class="comet-page-shell">
    <div id="comet-page-shell__product-well" class="comet-page-shell__product-well">
        <div class="comet-page-shell__product-well-inner">
            <div class="comet-product-bar js-comet-product-bar comet-product-bar--theme-product-science 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="#">
                    <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>
                        <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/unit-1">
                                <span class="comet-product-bar__breadcrumb-truncated-text">
                                    1
                                </span>
                                <span class="comet-product-bar__breadcrumb-text">
                                    <span class='comet-product-bar__breadcrumb-dim-text'>UNIT 1</span> The Universe
                                </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-90841">
                            <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-96846">
                            <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-96846" 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-96846" 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>
            <!-- START OF PRODUCT WELL CONTENT -->
            <!-- Placeholder image representing content -->
            <img src="/images/components/page-shell/science-page-shell-example.png" alt="Product Well Content">
            <!-- END OF PRODUCT WELL CONTENT -->
        </div>
        <div class="comet-page-shell__product-well-overlay js-comet-page-shell__product-well-overlay">
            <div class="comet-page-shell__close-global-nav-bar-wrap">
                <a href="#comet-page-shell__product-well" class="comet-page-shell__close-global-nav-bar js-comet-page-shell__close-global-nav-bar">
                    <span class="comet-screenreader-only">Jump to page content</span>
                    <svg class="comet-page-shell__close-global-nav-bar-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </div>
        </div>
        <div class="comet-row comet-footer">
            <div class="comet-row__inner">
                <div class='comet-columns'>
                    <ul class="comet-footer__link-list">
                        <li class="comet-footer__link">
                            <a href="https://app.discoveryeducation.com/static/apps/check-requirements/">Check Requirements</a>
                        </li>
                        <li class="comet-footer__link">
                            <a href="https://get.adobe.com/reader/">Download Acrobat Reader</a>
                        </li>
                        <li class="comet-footer__link">
                            <a href="http://www.discoveryeducation.com/aboutus/terms_of_use.cfm">Terms of Use</a>
                        </li>
                        <li class="comet-footer__link">
                            <a href="http://www.discoveryeducation.com/aboutus/privacy-policy/us.cfm">Support</a>
                        </li>
                        <li class="comet-footer__link">
                            <a href="http://www.discoveryeducation.com/contact-us/">Contact Us</a>
                        </li>
                        <li class="comet-footer__link">
                            <a href="http://www.discoveryeducation.com/who-we-are/about-discovery-education.cfm">About Us</a>
                        </li>
                        <li class="comet-footer__link">
                            <a href="http://www.discoveryeducation.com/closed-captioning/">Online Closed Captioning</a>
                        </li>
                        <li class="comet-footer__link">
                            <a href="#">Live Help Chat</a>
                        </li>
                    </ul>
                    <ul class="comet-footer__social-list">
                        <li class="comet-footer__social-link">
                            <a href="https://twitter.com/DiscoveryEd">
                                <svg class="comet-footer__social-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#twitter"></use>
                                </svg>
                                <span class="comet-screenreader-only">Twitter</span>
                            </a>
                        </li>
                        <li class="comet-footer__social-link">
                            <a href="https://www.facebook.com/discoveryed">
                                <svg class="comet-footer__social-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#facebook"></use>
                                </svg>
                                <span class="comet-screenreader-only">Facebook</span>
                            </a>
                        </li>
                        <li class="comet-footer__social-link">
                            <a href="https://www.youtube.com/user/DiscoveryEducation">
                                <svg class="comet-footer__social-icon" aria-hidden="true" focusable="false">
                                    <use xlink:href="/comet/comet_assets/comet.svg#youtube"></use>
                                </svg>
                                <span class="comet-screenreader-only">YouTube</span>
                            </a>
                        </li>
                    </ul>
                    <div class="comet-footer__legal comet-long-form-text">
                        <p>Copyright &copy; 2016 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="comet-page-shell__global-nav-bar js-comet-page-shell__global-nav-bar">
        <div class="comet-page-shell__global-nav-bar-touch-overlay js-comet-page-shell_global-nav-bar-touch-overlay"></div>
        <a id="mainNavAnchor" class="comet-screenreader-only" tabindex="0">Navigation Menu</a>
        <!-- START OF GLOBAL NAV BAR CONTENT -->
        <div class="comet-long-form-text">
            <h2>Global Nav Bar Content</h2>
        </div>
        <!-- END OF GLOBAL NAV BAR CONTENT -->
    </div>
    <div class="comet-page-shell__panel">
        <div class="comet-page-shell__panel-content">
            <div class="comet-page-shell__close-panel-wrap">
                <a href="#comet-page-shell__product-well" class="comet-page-shell__close-panel js-comet-page-shell__close-panel">
                    <span class="comet-screenreader-only">Jump to page content</span>
                    <svg class="comet-page-shell__close-panel-icon" aria-hidden="true" focusable="false">
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </div>
            <!-- START OF PANEL CONTENT -->
            <div class="comet-long-form-text">
                <h2>Panel Content</h2>
            </div>
            <!-- END OF PANEL CONTENT -->
        </div>
    </div>
</div>
                
{% call comet.page_shell() %}
    {% call comet.page_shell_product_well() %}
        {{ comet.product_bar(
            class="comet-product-bar--theme-product-science comet-product-bar--semi-transparent", 
            product_title="science-techbook", 
            breadcrumbs=[
                {   text: "Physical Science", 
                    href: "/link/to/physical-science"
                }, 
                {   
                    text: "<span class='comet-product-bar__breadcrumb-dim-text'>UNIT 1</span> The Universe", 
                    href:"/link/to/unit-1",
                    truncated_text: "1"
                }]) 
        }}
        <!-- START OF PRODUCT WELL CONTENT -->
            <!-- Placeholder image representing content -->
            <img src="/images/components/page-shell/science-page-shell-example.png" alt="Product Well Content">
        <!-- END OF PRODUCT WELL CONTENT -->
    {% endcall %}
    {% call comet.page_shell_global_nav_bar() %}
        <!-- START OF GLOBAL NAV BAR CONTENT -->
        <div class="comet-long-form-text">
            <h2>Global Nav Bar Content</h2>
        </div>
        <!-- END OF GLOBAL NAV BAR CONTENT -->
    {% endcall %}
    {% call comet.page_shell_panel() %}
        <!-- START OF PANEL CONTENT -->
        <div class="comet-long-form-text">
            <h2>Panel Content</h2>
        </div>
        <!-- END OF PANEL CONTENT -->
    {% endcall %}
{% endcall %}
                
Macro params reference

Guidelines

  • Define a default sort order for each customer configuration and role, prior to any personal customization that may occur after deployment.
  • Use the following template for creating configuration defaults:
    • Streaming Plus
    • Science Techbook
    • Social Studies Techbook
    • Math Techbook
    • My Content
    • Builder Tools [or] Board Builder
    • Classrooms
    • Assignment Results [or] Assignments
    • Professional Learning
    • Discovery Educator Network (DEN)
    • --- More ---
    • Assessment [Teacher Only]
    • Science Elementary School
    • Science Middle School
    • Health
  • Adjust where “More” occurs in a configuration to optimize 5-7 frequently used services in the primary list.

Class Reference

Class / applies to Outcome

.comet-global-nav-bar--theme-product-science
div.comet-global-nav-bar

Changes right "selected" nav item border to Science Techbook's theme color

.comet-global-nav-bar--theme-product-math
div.comet-global-nav-bar

Changes right "selected" nav item border to Math Techbook's theme color

.comet-global-nav-bar--theme-product-social-studies
div.comet-global-nav-bar

Changes right "selected" nav item border to Social Studies Techbook's theme color

.comet-global-nav-bar--theme-product-streaming
div.comet-global-nav-bar

Changes right "selected" nav item border to Streaming's theme color

.comet-global-nav-bar--more-nav-expanded
div.comet-global-nav-bar

Expands the "More Products & Services" accordion

.comet-global-nav-bar__item--selected
div.comet-global-nav-bar__item

Adds selected visual indicator to nav item

.comet-global-nav-bar__item--draggable
div.comet-global-nav-bar__item

Adds draggable grip icon to nav item on hover and in Customize mode

.comet-global-nav-bar__item--sorting
div.comet-global-nav-bar__item

Added dynamically via Javascript to make visual state consistent while dragging a reorderable nav item

.comet-global-nav-bar__item--sorting
div.comet-global-nav-bar__item

Added dynamically via Javascript to make visual state consistent while dragging a reorderable nav item

.comet-global-nav-bar__item--home
div.comet-global-nav-bar__item

Hides the "Home" nav item when the nav is no longer off-canvas

Macro Params Reference

Param Values Description

class

false (default) or string

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

id

false (default) or string

Sets the id attribute of the div.comet-global-nav-bar element

icon_path

false (default) or string

Overrides the icon path for SVG icons within the Global Nav Bar

nav_items

Array of objects, default "Home" and "Search"

An array of Javascript objects with the following keys: label, href, type_icon, draggable, icon_path

more_nav_items

Array of objects, default "Additional Item"

An array of Javascript objects with the following keys: label, href, type_icon, draggable, icon_path

Navigation Menu