{% capture api %} Return the HTML Bootstrap 4 navbar given in liquid as `include.nav` or `site.nav`. Expected are `right` and `left` arrays with the page title. Array elements containing an array are rendered as dropdowns.

“` yml left:

- Home
- Docs:
  - Tempus
  - Libros
- Customize:
  - Css
  - Themes
- About

right:

- Login

“`

“`liquid {% raw %}{% include page/navbar.html nav=site.data.navbar %}{% endraw %} “`

{% endcapture %} {% include api/save.html %} {%- assign default_nav = site.html_pages -%} {%- assign navigation = include.nav | default: site.navbar -%} <!– Navbar –> <nav class=“navbar navbar-expand-md”>

<div class="container{{ fluid }}">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarHeader">
                <ul class="navbar-nav mr-auto">
                        {%- for nav in navigation.left -%}
                                {%- if nav.first == nil -%}
                                        {% assign link = site.pages | where:'title', nav | default: [url: nav] %}
                                        {% include components/navbar_link.html %}
                                {%- else -%}
                                        {%- assign list_title = nav | first | first -%}
                                        {%- assign list_title_slug = list_title | slugify -%}
                                        {%- assign list = nav.first[1] -%}
                                        <!-- Dropdown -->
                                        <li class="nav-item dropdown">
                                                <a class="nav-link dropdown-toggle" href="#" id="{{ list_title_slug }}_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                {{ list_title }}
                                                </a>
                                                <div class="dropdown-menu" aria-labelledby="{{ list_title_slug }}_dropdown">
                                                        {% for item in list %}
                                                                {%- assign link = site.pages | where:'title', item | default: nil -%}
                                                                <a class="dropdown-item{% if page.url == link[0].url %} active{% endif %}" href="{{ link[0].url | absolute_url }}">{{ item }}{% if page.url == link[0].url %} <span class="sr-only">(current)</span>{% endif %}</a>
                                                        {% endfor %}
                                                </div>
                                        </li>
                                {%- endif -%}
                        {%- endfor -%}
                </ul>
                <ul class="navbar-nav my-lg-0">
                        {% for nav in navigation.right %}
                        {%- assign link = site.pages | where:'title', nav -%}
                        {% include components/navbar_link.html %}
                        {% endfor %}
                </ul>
        </div>
</div>

</nav>