Navbar

In groundhog since v0.1.1

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>

Free trial


<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>

Free trial


<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>

Free trial


<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>

Free trial

Home
Ruxit API v1 documentation (Beta)
General information


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

With secondary navigation items nav
Without secondary navigation items nav has-no-secondary

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.
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.

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>

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>
```

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>

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"
   }
 ]
}
```
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.

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

Navbar

Examples

Introduction

Navbar versions

Including the navbar

Available classes for navbar

Available classes for nav lists

Available classes for nav items