xrpl-dev-portal/tool/template-top-nav.html

<div class="container-fluid">
<nav class="top-nav navbar navbar-expand-lg navbar-dark row">
  <a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo"  height="44" alt="{{target.display_name}}" /></a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarHolder" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarHolder">
    <ul class="nav navbar-nav">
      {% macro dropdown(funnel, appendpages=[]) %}
      <li class="nav-item dropdown">
        {% set links = pages|selectattr('funnel','defined_and_equalto',funnel)|
                             selectattr('top_nav_level', 'defined')|list +
                             appendpages %}
        {% set funneltop = pages|selectattr('funnel','defined_and_equalto',funnel)|first %}
        <a class="nav-link dropdown-toggle" href="#" id="topnav_{{funneltop.html}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{funneltop.name}}</a>
        <div class="dropdown-menu" aria-labelledby="topnav_{{funneltop.html}}">
          {% for link in links %}
          <a class="dropdown-item {% if link.top_nav_level is undefined %}top-level-1{% else %}top-level-{{link.top_nav_level}}{% endif %}{% if currentpage == link %} active{% endif %}" href="{{link.html}}">{% if link.top_nav_name is defined %}{{link.top_nav_name}}{% else %}{{link.name}}{% endif %}</a>
          {% endfor %}
        </div>
      </li>
      {% endmacro %}

      {{ dropdown("Learn") }}

      {% if target.lang == "ja" %}
      {{ dropdown("Explore", [{"name":"XRP Ledger エクスプローラ", "html": "https://livenet.xrpl.org/"}]) }}
      {% else %}
      {{ dropdown("Explore", [{"name":"Ledger Explorer", "html": "https://livenet.xrpl.org/"}]) }}
      {% endif %}

      {% if target.lang == "ja" %}
      {{ dropdown("Build", [{"name": "開発者ブログ", "html": "/blog/"}]) }}
      {% else %}
      {{ dropdown("Build", [{"name": "Dev Blog", "html": "/blog/"}]) }}
      {% endif %}

      <li class="nav-item">
        <a class="nav-link" href="contribute.html">{% trans %}Contribute{% endtrans %}</a>
      </li>

      {% include 'template-github-edit.html' %}

      <li class="nav-item dropdown" id="navbar-search">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" id="topnav-search-dropdown-toggle"><i class="fa fa-search"></i><span class="sr-only">{% trans %}Open Search{% endtrans %}</span></a>
        <div class="dropdown-menu">
          <form class="navbar-form navbar-right" role="search">
            <div class="form-inline">
              <div class="input-group">
                <label class="input-group-prepend" for="topsearchbar"><i class="fa fa-search input-group-text"></i><span class="sr-only">{% trans %}Search site...{% endtrans %}</span></label>
                <input id="topsearchbox" name="q" type="text" class="form-control" placeholder="{% trans %}Search site...{% endtrans %}">
                <div class="input-group-append d-none d-lg-flex">
                  <button type="button" class="btn btn-default" data-toggle="dropdown" data-target="topnav-search-dropdown-toggle"><i class="fa fa-times"></i><span class="sr-only">{% trans %}Close Search{% endtrans %}</span></button>
                </div>
              </div><!--/.input-group-->
            </div>
          </form>
        </div><!--/.dropdown-menu-->
      </li><!--/.dropdown-->

      <li class="nav-item wrap-button">
        <a class="btn btn-outline-secondary nav-link" href="get-started.html">{% trans %}Get Started{% endtrans %}</a>
      </li>

    </ul><!-- /.navbar-nav -->

    <div class="nav navbar-nav language-selector">
      <div class="dropdown">
        <a class="nav-link dropdown-toggle with-caret" id="language_selector_header_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
        </a>
        <div class="dropdown-menu smaller-dropdown" aria-labelledby="language_selector_header_btn">
          {% for lang in config.languages %}
          <a class="dropdown-item" href="{{lang.prefix}}{{currentpage.html}}">{{lang.display_name}}</a>
          {% endfor %}
        </div><!--/.dropdown-menu-->
      </div><!--/.dropdown-->
    </div><!--/.language-selector-->
  </div><!--/#navbarHolder-->
</nav>
</div>