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="/assets/data/search_results.json">
      <input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
    </form>
    <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="#">Solutions</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Platform</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Capabilities</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Technologies</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">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">
      <input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
    </form>
    <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="#">Solutions</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Platform</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Capabilities</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Technologies</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Pricing</a>
      </li>
    </ul>

    <ul class="nav__list nav__list--secondary">
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#">Community</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#">Company</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#">Blogs</a>
      </li>
      <li class="nav__item">
        <a class="nav__link nav__link--secondary" href="#">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">
      <input type="search" class="inputfield inputfield--search nav__search js-search" name="searchterm"/>
    </form>
    <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="#">Solutions</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Platform</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Capabilities</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Technologies</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Services</a>
      </li>
      <li class="nav__item">
        <a class="nav__link" href="#">Pricing</a>
      </li>
    </ul>

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