Navbar

Examples


<div class="nav has-no-secondary">
  <a class="nav__brand" href="/">
    <img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
  </a>
  <div class="nav__buttongroup">
    <form action="/search/" data-results="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
      <input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm" autocomplete="off"/>
    </form>
    <a href="#" class="nav__search__icon"></a>
    <button data-target="#nav-bar-example1" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example1" class="nav__bar js-nav-toggle">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item">
        <a class="nav__link" href="#noop">Solutions</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Platform</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Capabilities</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Technologies</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Pricing</a>
      </li>
    </ul>
  </nav>
</div>

    

<div class="nav">
  <a class="nav__brand" href="/">
    <img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
  </a>
  <div class="nav__buttongroup">
    <form action="/assets/data/search_results.json" data-results="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
      <input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm" autocomplete="off"/>
    </form>
    <a href="#" class="nav__search__icon"></a>
    <button data-target="#nav-bar-example2" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example2" class="nav__bar js-nav-toggle">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item">
        <a class="nav__link" href="#noop">Solutions</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Platform</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Capabilities</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Technologies</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Pricing</a>
      </li>
    </ul>

    <ul class="nav__list nav__list--secondary">
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Community</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Company</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Blogs</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Resources</a>
      </li>
    </ul>
  </nav>
</div>

    

<div class="nav">
  <a class="nav__brand" href="/">
    <img class="nav__logo" src="http://assets.dynatrace.com/global/logos/dynatrace-logo.svg" alt="dynatrace logo"/>
  </a>
  <div class="nav__buttongroup">
    <form action="/assets/data/search_results.json" data-results="/assets/data/search_results.json" data-resultskey="results" data-maxresults="5" data-titleprop="label" data-urlprop="url">
      <input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm" autocomplete="off"/>
    </form>
    <a href="#noop" class="nav__search__icon"></a>
    <a class="nav__btn nav__btn--cta" href="https://www.dynatrace.com/trial/">Free trial</a>
    <button data-target="#nav-bar-example3" id="menu-toggle" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example3" class="nav__bar js-nav-toggle">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item">
        <a class="nav__link" href="#noop">Solutions</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Platform</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Capabilities</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Technologies</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Pricing</a>
      </li>
    </ul>

    <ul class="nav__list nav__list--secondary">
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Community</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Company</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Blogs</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#noop">Resources</a>
      </li>
    </ul>
  </nav>
</div>

    

Introduction

The Groundhog navbar usually holds links and the logo. Additionally, there can be a search and a call to action button.

The Groundhog navbar appears in a two versions:

Including the navbar

  1. To include a Groundhog navbar add an <ul> element with multiple <li> items, for the menu items. The <ul> with secondary menu items is optional. Add a wrapper <div>.

  2. Update all menu items' references and classes.

    <li class="nav__item">
    <a class="nav__link" href="#">Services</a>
    </li>
    
    <li class="nav__item">
    <a class="nav__link nav__link--secondary" href="#">Company</a>
    </li>
    
  3. Add the search functionality and update the link to the search page. (Optional)

    <form action="/search/">
    <input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
    </form>
    
    <a href="#" class="nav__search__icon"></a>
    
  4. Update <form> action and attributes. (Optional)

    <form action="/search/" data-results="/assets/data/search_results.json" data-titleprop="label"
     data-urlprop="path" data-maxresults="5" data-resultskey="results">
    
    • action="/search/" set the form's action.

    • data-results="/assets/data/search_results.json" sets the url for fetching the search results. (Optional, default: forms action attribute)

    • data-resultskey="results" sets the key for the list of search results. (Optional, default: results)

    • data-maxresults="5" sets the number of search results shown. (Optional, default: 10)

    • data-titleprop="label" sets the key for the search results' title. (Optional, default: label)

    • data-urlprop="path" sets the key for the search results' path. (Optional, default: url)

    Example results:

    {
     "results": [
       {
         "label": "Test-Papaya",
         "url": "/test/test-papaya"
       }
     ]
    }
    
  5. Adjust the breakpoints. (Optional)

The $nav-breakpoint sets the width where all menu items from the 'Menu' dropdown are shown in the navbar. The second breakpoint $nav-search-to-icon-breakpoint sets the width where the search link is replaced by a search input field, directly in the navbar.

Available classes for navbar

class name effect
.nav Base class for the navbar element
.nav has-no-secondary Navbar without secondary navigation items
.nav__list--primary Menu item list for primary nav
.nav__list--secondary Menu item list for secondary nav