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">
    <button data-target="#nav-bar-example1" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example1" class="nav__bar">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item">
        <a class="nav__link" href="#noop">Components</a>
      </li>
      <li class="nav__item is-current">
        <a class="nav__link" href="#noop">Layouts</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Test pages</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Showcase</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="/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>
    <a class="nav__btn nav__btn--cta" href="https://www.dynatrace.com/trial/">Free trial</a>
    <button data-target="#nav-bar-example2" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example2" class="nav__bar">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item">
        <a class="nav__link" href="#noop">Solution & pricing</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Why Dynatrace</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">Company</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#noop">News & resources</a>
      </li>
      <li class="nav__item nav__item--right">
        <a class="nav__link" href="#noop">Support</a>
      </li>
      <li class="nav__item nav__item--right">
        <a class="nav__link" href="#noop">Login</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="/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="#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" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example3" class="nav__bar">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item expandable expandable--nav">
        <a class="nav__link expandable__trigger" href="#noop">Solution & pricing</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Use cases</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Capabilities</a>
          </li>
        </ul>
      </li>
      <li class="nav__item expandable expandable--nav">
        <a class="nav__link expandable__trigger" href="#noop">Why Dynatrace</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">AI powered</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Full stack</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Automated</a>
          </li>
        </ul>
      </li>
      <li class="nav__item expandable expandable--nav is-current">
        <a class="nav__link expandable__trigger" href="#noop">Company</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item is-current">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Customer stories</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Industry leadership</a>
          </li>
        </ul>
      </li>
      <li class="nav__item nav__item--right">
        <a class="nav__link" href="#noop">Login</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="/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="#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-example4" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example4" class="nav__bar">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item expandable expandable--nav">
        <a class="nav__link expandable__trigger" href="#noop">Solution & pricing</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Use cases</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Capabilities</a>
          </li>
        </ul>
      </li>
      <li class="nav__item expandable expandable--nav">
        <a class="nav__link expandable__trigger" href="#noop">Why Dynatrace</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">AI powered</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Full stack</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Automated</a>
          </li>
        </ul>
      </li>
      <li class="nav__item expandable expandable--nav is-current">
        <a class="nav__link expandable__trigger" href="#noop">Company</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item is-current">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Customer stories</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Industry leadership</a>
          </li>
        </ul>
      </li>
      <li class="nav__item nav__item--right">
        <a class="nav__link" href="#noop">Login</a>
      </li>
    </ul>
  </nav>
</div>
<div class="subnav">
  <nav class="subnav__bar expandable expandable--subnav">
    <a href="#noop" class="expandable__trigger">Schedule</a>
    <ul class="subnav__list expandable__content">
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Perform 2018</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Speakers</a>
      </li>
      <li class="subnav__item is-current">
        <a class="subnav__link" href="#noop">Schedule</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Workshops</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Locations</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Partners</a>
      </li>
      <li class="subnav__item">
        <a class="subnav__link" href="#noop">Tickets</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="/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="#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-example5" class="nav__btn nav__btn--menutoggle">Menu</button>
  </div>
  <nav id="nav-bar-example5" class="nav__bar">
    <ul class="nav__list nav__list--primary">
      <li class="nav__item expandable expandable--nav">
        <a class="nav__link expandable__trigger" href="#noop">Solution & pricing</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Use cases</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Capabilities</a>
          </li>
        </ul>
      </li>
      <li class="nav__item expandable expandable--nav">
        <a class="nav__link expandable__trigger" href="#noop">Why Dynatrace</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">AI powered</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Full stack</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Automated</a>
          </li>
        </ul>
      </li>
      <li class="nav__item expandable expandable--nav is-current">
        <a class="nav__link expandable__trigger" href="#noop">Company</a>
        <ul class="nav__list nav__list--secondary expandable__content">
          <li class="nav__item is-current">
            <a class="nav__link" href="#noop">Overview</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Customer stories</a>
          </li>
          <li class="nav__item">
            <a class="nav__link" href="#noop">Industry leadership</a>
          </li>
        </ul>
      </li>
      <li class="nav__item nav__item--right">
        <a class="nav__link" href="#noop">Login</a>
      </li>
    </ul>
  </nav>
</div>
<ul class="breadcrumbs">
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="#noop">Home</a>
  </li>
  <li class="breadcrumbs__item">
    <a class="breadcrumbs__link" href="#noop">Ruxit API v1 documentation (Beta)</a>
  </li>
  <li class="breadcrumbs__item">
    <span class="breadcrumbs__last">General information</span>
  </li>
</ul>
    

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 two versions:

Including the navbar

  1. To include a Groundhog navbar follow the example templates above. The navbar consists of the following elements: a wrapper <div>, the primary nav list including optional secondary nav lists (<ul>), a container for buttons including the menu toggle and the search, and the company logo.

  2. Add all necessary Groundhog classes for the elements mentioned in step 1. Use the has-no-secondary class on the nav's wrapper <div> if there is no need for a secondary navigation.

  3. If a secondary navigation is used, nest the <ul> element within the <li> item of the pages' parent. Add classes from Groundhog's expandable for mobile behavior.

    <ul class="nav__list nav__list--primary">
    <li class="nav__item expandable expandable--nav">
     <a class="nav__link expandable__trigger" href="#">Solution & Pricing</a>
     <ul class="nav__list nav__list--secondary expandable__content">
       <li class="nav__item">
         <a class="nav__link" href="#">Overview</a>
       </li>
       <li class="nav__item">
         <a class="nav__link" href="#">Use cases</a>
       </li>
     </ul>
    </li>
    </ul>
    
  4. Add the menu toggle button to be able to show the navigation on small screens. Make sure that the data-target value is the same as the id of the nav bar.

    <button data-target="#nav-bar" class="nav__btn nav__btn--menutoggle">Menu</button>
    ...
    <nav id="nav-bar" class="nav__bar">...</nav>
    
  5. 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>
    
  6. 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"
       }
     ]
    }
    
  7. 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 lists

Available classes for nav lists

class name effect
.nav__list Base class for the nav list element
.nav__list--primary Menu item list for primary nav
.nav__list--secondary Menu item list for secondary nav

Available classes for nav items

class name effect
.nav__item Base class for nav items
.nav__item is-current Indicates that page or a child page is currently selected
.nav__item--right For nav items on primary level only, moves them to the right of the navbar