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

<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">
                <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-labelledby="title">
                        <title>science-techbook</title>
                        <use xlink:href="/comet/comet_assets/comet.svg#science-techbook"></use>
                    </svg>
                </a>
                <nav>
                    <ul class="comet-product-bar__breadcrumbs">
                        <li class="comet-product-bar__breadcrumb-separator">
                            <svg class="comet-product-bar__breadcrumb-separator-icon" aria-labelledby="title">
                                <title>caret-right</title>
                                <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-labelledby="title">
                                <title>caret-right</title>
                                <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>
                        <li class="comet-product-bar__breadcrumb-separator">
                            <svg class="comet-product-bar__breadcrumb-separator-icon" aria-labelledby="title">
                                <title>caret-right</title>
                                <use xlink:href="/comet/comet_assets/comet.svg#caret-right"></use>
                            </svg>
                        </li>
                    </ul>
                </nav>
                <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-4092">
                            <svg class="comet-product-bar__action-icon" aria-labelledby="title">
                                <title>profile</title>
                                <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-4092" 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-4092" href="#">
                                        <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-labelledby="title">
                                            <title>x</title>
                                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                        </svg>
                                    </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">
                                                    Kevin Powell
                                                </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" href="#path-to-quicklist">
                            <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-labelledby="title">
                                <title>bookmark</title>
                                <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-labelledby="title">
                        <title>x</title>
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </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>
        <!-- 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-labelledby="title">
                        <title>x</title>
                        <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

Homepage

The My DE page for all user roles displays a unique variation of global nav bar that is always expanded and always shows the contents of “More Products & Services.”

  • Never use the homepage variation on other pages.
<div class="comet-page-shell comet-page-shell--global-nav-bar-expanded-always">
    <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--gradient">
                <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--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-21171">
                            <svg class="comet-product-bar__action-icon" aria-labelledby="title">
                                <title>profile</title>
                                <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-21171" 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-21171" href="#">
                                        <svg class="comet-product-bar__profile-dropdown-header-close-icon" aria-labelledby="title">
                                            <title>x</title>
                                            <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                                        </svg>
                                    </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">
                                                    Kevin Powell
                                                </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" href="#path-to-quicklist">
                            <svg class="comet-product-bar__action-icon comet-button--icon__icon" aria-labelledby="title">
                                <title>bookmark</title>
                                <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/homepage-page-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-labelledby="title">
                        <title>x</title>
                        <use xlink:href="/comet/comet_assets/comet.svg#x"></use>
                    </svg>
                </a>
            </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>
        <!-- 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-labelledby="title">
                        <title>x</title>
                        <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(class="comet-page-shell--global-nav-bar-expanded-always") %}
    {% call comet.page_shell_product_well() %}
        {{ comet.product_bar(class="comet-product-bar--gradient") }}
        <!-- START OF PRODUCT WELL CONTENT -->
            <!-- Placeholder image representing content -->
            <img src="/images/components/page-shell/homepage-page-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

  • Always have Home and Search appear at the top and never allow them to be customized.
  • 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:
    • Search
    • Science Techbook
    • Social Studies Techbook
    • Math Techbook
    • My Content
    • Builder [aka Create]
    • Classrooms [Teacher Only]
    • --- More ---
    • Training & Development [Teacher Only]
    • Discovery Educator Network (DEN) [Teacher Only]
    • Assessment [Teacher Only]
    • Streaming Plus
    • 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