{% 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
“`
-
Usage
“`liquid {% raw %}{% include page/navbar.html nav=site.data.navbar %}{% endraw %} “`
-
**Called by** `_includes/page/top.html` to render main navigation
-
Call `_includes/components/navbar_link.html` to render singular links
{% 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>