Upgraded MkDocs to 1.0

CHANGELOG

@@ -1,3 +1,7 @@
+mkdocs-material-3.0.0 (2018-08-xx)
+
+  * Upgraded MkDocs to 1.0
+
 mkdocs-material-2.9.4 (2018-07-29)
 
   * Fixed build error after MkDocs upgrade

material/assets/images/icons/bitbucket.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="352" height="448"
+    viewBox="0 0 352 448" id="__bitbucket">
+  <path fill="currentColor" d="M203.75 214.75q2 15.75-12.625 25.25t-27.875
+        1.5q-9.75-4.25-13.375-14.5t-0.125-20.5 13-14.5q9-4.5 18.125-3t16 8.875
+        6.875 16.875zM231.5 209.5q-3.5-26.75-28.25-41t-49.25-3.25q-15.75
+        7-25.125 22.125t-8.625 32.375q1 22.75 19.375 38.75t41.375 14q22.75-2
+        38-21t12.5-42zM291.25
+        74q-5-6.75-14-11.125t-14.5-5.5-17.75-3.125q-72.75-11.75-141.5 0.5-10.75
+        1.75-16.5 3t-13.75 5.5-12.5 10.75q7.5 7 19 11.375t18.375 5.5 21.875
+        2.875q57 7.25 112 0.25 15.75-2 22.375-3t18.125-5.375 18.75-11.625zM305.5
+        332.75q-2 6.5-3.875 19.125t-3.5 21-7.125 17.5-14.5 14.125q-21.5
+        12-47.375 17.875t-50.5 5.5-50.375-4.625q-11.5-2-20.375-4.5t-19.125-6.75-18.25-10.875-13-15.375q-6.25-24-14.25-73l1.5-4
+        4.5-2.25q55.75 37 126.625 37t126.875-37q5.25 1.5 6 5.75t-1.25 11.25-2
+        9.25zM350.75 92.5q-6.5 41.75-27.75 163.75-1.25 7.5-6.75 14t-10.875
+        10-13.625 7.75q-63 31.5-152.5
+        22-62-6.75-98.5-34.75-3.75-3-6.375-6.625t-4.25-8.75-2.25-8.5-1.5-9.875-1.375-8.75q-2.25-12.5-6.625-37.5t-7-40.375-5.875-36.875-5.5-39.5q0.75-6.5
+        4.375-12.125t7.875-9.375 11.25-7.5 11.5-5.625 12-4.625q31.25-11.5
+        78.25-16 94.75-9.25 169 12.5 38.75 11.5 53.75 30.5 4 5 4.125
+        12.75t-1.375 13.5z" />
+</svg>

material/assets/images/icons/github.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416" height="448"
+    viewBox="0 0 416 448" id="__github">
+  <path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19-18.125
+        8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19 18.125-8.5
+        18.125 8.5 10.75 19 3.125 20.5zM320 304q0 10-3.125 20.5t-10.75
+        19-18.125 8.5-18.125-8.5-10.75-19-3.125-20.5 3.125-20.5 10.75-19
+        18.125-8.5 18.125 8.5 10.75 19 3.125 20.5zM360
+        304q0-30-17.25-51t-46.75-21q-10.25 0-48.75 5.25-17.75 2.75-39.25
+        2.75t-39.25-2.75q-38-5.25-48.75-5.25-29.5 0-46.75 21t-17.25 51q0 22 8
+        38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0
+        37.25-1.75t35-7.375 30.5-15 20.25-25.75 8-38.375zM416 260q0 51.75-15.25
+        82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5-41.75
+        1.125q-19.5 0-35.5-0.75t-36.875-3.125-38.125-7.5-34.25-12.875-30.25-20.25-21.5-28.75q-15.5-30.75-15.5-82.75
+        0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25
+        30.875q36.75-8.75 77.25-8.75 37 0 70 8 26.25-20.5
+        46.75-30.25t47.25-9.75q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34
+        99.5z" />
+</svg>

material/assets/images/icons/gitlab.svg

@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
+    viewBox="0 0 500 500" id="__gitlab">
+  <g transform="translate(156.197863, 1.160267)">
+  	<path fill="currentColor"
+        d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
+          473.347L93.667,473.347z" />
+  </g>
+  <g transform="translate(28.531199, 1.160800)" opacity="0.7">
+  	<path fill="currentColor"
+        d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
+          473.345z" />
+  </g>
+  <g transform="translate(0.088533, 0.255867)" opacity="0.5">
+  	<path fill="currentColor"
+        d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
+          20.99l238.514,173.29 L32,195.155L32,195.155z" />
+  </g>
+  <g transform="translate(29.421866, 280.255593)">
+  	<path fill="currentColor"
+        d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
+          0L2.667-84.844 L2.667-84.844z" />
+  </g>
+  <g transform="translate(247.197860, 1.160800)" opacity="0.7">
+  	<path fill="currentColor"
+        d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
+          473.345z" />
+  </g>
+  <g transform="translate(246.307061, 0.255867)" opacity="0.5">
+  	<path fill="currentColor"
+        d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
+          16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z" />
+  </g>
+  <g transform="translate(336.973725, 280.255593)">
+  	<path fill="currentColor"
+        d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
+          17.856,0L130.667-84.844 L130.667-84.844z" />
+  </g>
+</svg>

material/base.html

@@ -35,7 +35,7 @@
       ] %}
         <meta name="lang:{{ key }}" content="{{ lang.t(key) }}">
       {% endfor %}
-      <link rel="shortcut icon" href="{{ base_url }}/{{ config.theme.favicon }}">
+      <link rel="shortcut icon" href="{{ config.theme.favicon | url }}">
       <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-2.9.4">
     {% endblock %}
     {% block htmltitle %}
@@ -48,9 +48,9 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.451f80e5.css">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/application.451f80e5.css' | url }}">
       {% if palette.primary or palette.accent %}
-        <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.22915126.css">
+        <link rel="stylesheet" href="{{ 'assets/stylesheets/application-palette.22915126.css' | url }}">
       {% endif %}
       {% if palette.primary %}
         {% import "partials/palette.html" as map %}
@@ -61,7 +61,7 @@
       {% endif %}
     {% endblock %}
     {% block libs %}
-      <script src="{{ base_url }}/assets/javascripts/modernizr.1aa3b519.js"></script>
+      <script src="{{ 'assets/javascripts/modernizr.1aa3b519.js' | url }}"></script>
     {% endblock %}
     {% block fonts %}
       <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
@@ -73,9 +73,9 @@
         <style>body,input{font-family:"{{ font.text }}","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"{{ font.code }}","Courier New",Courier,monospace}</style>
       {% endif %}
     {% endblock %}
-    <link rel="stylesheet" href="{{ base_url }}/assets/fonts/material-icons.css">
+    <link rel="stylesheet" href="{{ 'assets/fonts/material-icons.css' | url }}">
     {% for path in extra_css %}
-      <link rel="stylesheet" href="{{ path }}">
+      <link rel="stylesheet" href="{{ path | url }}">
     {% endfor %}
     {% block extrahead %}{% endblock %}
   </head>
@@ -102,7 +102,7 @@
     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
     <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
     {% if page.toc | first is defined %}
-      <a href="{{ (page.toc | first).url }}" tabindex="1" class="md-skip">
+      <a href="{{ (page.toc | first).url | url }}" tabindex="1" class="md-skip">
         {{ lang.t('skip.link.title') }}
       </a>
     {% endif %}
@@ -177,30 +177,30 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application.5c3774b5.js"></script>
+      <script src="{{ '/assets/javascripts/application.5c3774b5.js' | url }}"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}
-          {% set path = base_url + "/assets/javascripts/lunr" %}
+          {% set path = "/assets/javascripts/lunr/" %}
-          <script src="{{ path }}/lunr.stemmer.support.js"></script>
+          <script src="{{ path + 'lunr.stemmer.support.js' | url }}"></script>
           {% for language in languages | map("trim") %}
             {% if language != "en" %}
               {% if language == "jp" %}
-                <script src="{{ path }}/tinyseg.js"></script>
+                <script src="{{ path + 'tinyseg.js' | url }}"></script>
               {% endif %}
               {% if language in ("da", "de", "du", "es", "fi", "fr", "hu", "it", "jp", "no", "pt", "ro", "ru", "sv", "tr") %}
-                <script src="{{ path }}/lunr.{{ language }}.js"></script>
+                <script src="{{ path + 'lunr.' + language + '.js' | url }}"></script>
               {% endif %}
             {% endif %}
           {% endfor %}
           {% if languages | length > 1 %}
-            <script src="{{ path }}/lunr.multi.js"></script>
+            <script src="{{ path + 'lunr.multi.js' | url }}"></script>
           {% endif %}
         {% endif %}
       {% endif %}
       <script>app.initialize({version:"{{ mkdocs_version }}",url:{base:"{{ base_url }}"}})</script>
       {% for path in extra_javascript %}
-        <script src="{{ path }}"></script>
+        <script src="{{ path | url }}"></script>
       {% endfor %}
     {% endblock %}
     {% block analytics %}

material/partials/footer.html

@@ -4,7 +4,7 @@
     <div class="md-footer-nav">
       <nav class="md-footer-nav__inner md-grid">
         {% if page.previous_page %}
-          <a href="{{ page.previous_page.url }}" title="{{ page.previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
+          <a href="{{ page.previous_page.url | url }}" title="{{ page.previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
             <div class="md-flex__cell md-flex__cell--shrink">
               <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
             </div>
@@ -19,7 +19,7 @@
           </a>
         {% endif %}
         {% if page.next_page %}
-          <a href="{{ page.next_page.url }}" title="{{ page.next_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
+          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
             <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
               <span class="md-flex__ellipsis">
                 <span class="md-footer-nav__direction">

material/partials/header.html

@@ -2,13 +2,11 @@
   <nav class="md-header-nav md-grid">
     <div class="md-flex">
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ config.site_url | default(nav.homepage.url, true) }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo">
+        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo">
           {% if config.theme.logo.icon %}
             <i class="md-icon">{{ config.theme.logo.icon }}</i>
-          {% elif config.theme.logo.startswith("http") %}
-            <img src="{{ config.theme.logo }}" width="24" height="24">
           {% else %}
-            <img src="{{ base_url }}/{{ config.theme.logo }}" width="24" height="24">
+            <img src="{{ config.theme.logo | url }}" width="24" height="24">
           {% endif %}
         </a>
       </div>

material/partials/nav-item.html

@@ -38,7 +38,7 @@
         {{ nav_item.title }}
       </label>
     {% endif %}
-    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
+    <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}" class="md-nav__link md-nav__link--active">
       {{ nav_item.title }}
     </a>
     {% if toc_ | first is defined %}
@@ -47,7 +47,7 @@
   </li>
 {% else %}
   <li class="{{ class }}">
-    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-nav__link">
+    <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}" class="md-nav__link">
       {{ nav_item.title }}
     </a>
   </li>

material/partials/nav.html

@@ -1,12 +1,10 @@
 <nav class="md-nav md-nav--primary" data-md-level="0">
   <label class="md-nav__title md-nav__title--site" for="__drawer">
-    <a href="{{ config.site_url | default(nav.homepage.url, true) }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
+    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-nav__button md-logo">
       {% if config.theme.logo.icon %}
         <i class="md-icon">{{ config.theme.logo.icon }}</i>
-      {% elif config.theme.logo.startswith("http") %}
-        <img src="{{ config.theme.logo }}" width="48" height="48">
       {% else %}
-        <img src="{{ base_url }}/{{ config.theme.logo }}" width="48" height="48">
+        <img src="{{ config.theme.logo | url }}" width="48" height="48">
       {% endif %}
     </a>
     {{ config.site_name }}

material/partials/tabs-item.html

@@ -1,11 +1,11 @@
 {% if nav_item.is_homepage %}
   <li class="md-tabs__item">
     {% if not page.ancestors | length and nav | selectattr("url", page.url) %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link md-tabs__link--active">
+      <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}" class="md-tabs__link md-tabs__link--active">
         {{ nav_item.title }}
       </a>
     {% else %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}" class="md-tabs__link">
+      <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}" class="md-tabs__link">
         {{ nav_item.title }}
       </a>
     {% endif %}
@@ -18,11 +18,11 @@
   {% else %}
     <li class="md-tabs__item">
       {% if nav_item.active %}
-        <a href="{{ (nav_item.children | first).url }}" title="{{ title }}" class="md-tabs__link md-tabs__link--active">
+        <a href="{{ (nav_item.children | first).url | url }}" title="{{ title }}" class="md-tabs__link md-tabs__link--active">
           {{ title }}
         </a>
       {% else %}
-        <a href="{{ (nav_item.children | first).url }}" title="{{ title }}" class="md-tabs__link">
+        <a href="{{ (nav_item.children | first).url | url }}" title="{{ title }}" class="md-tabs__link">
           {{ title }}
         </a>
       {% endif %}

mkdocs.yml

@@ -100,7 +100,7 @@ markdown_extensions:
   - pymdownx.tilde
 
 # Page tree
-pages:
+nav:
   - Material: index.md
   - Getting started: getting-started.md
   - Extensions:

requirements.txt

@@ -19,6 +19,6 @@
 # IN THE SOFTWARE.
 
 # Direct dependencies
-mkdocs>=0.17.3,<1
+mkdocs>=1
 Pygments>=2.2
 pymdown-extensions>=4.11

src/base.html

@@ -76,7 +76,7 @@
 
       <!-- Favicon -->
       <link rel="shortcut icon"
-          href="{{ base_url }}/{{ config.theme.favicon }}">
+          href="{{ config.theme.favicon | url }}">
 
       <!-- Generator banner -->
       <meta name="generator"
@@ -99,12 +99,12 @@
 
       <!-- Theme-related stylesheets -->
       <link rel="stylesheet" type="text/css"
-          href="{{ base_url }}/assets/stylesheets/application.css" />
+          href="{{ 'assets/stylesheets/application.css' | url }}" />
 
       <!-- Extra color palette -->
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" type="text/css"
-            href="{{ base_url }}/assets/stylesheets/application-palette.css" />
+            href="{{ 'assets/stylesheets/application-palette.css' | url }}" />
       {% endif %}
 
       <!-- Theme-color meta tag for Android -->
@@ -119,7 +119,7 @@
 
     <!-- JavaScript libraries -->
     {% block libs %}
-      <script src="{{ base_url }}/assets/javascripts/modernizr.js"></script>
+      <script src="{{ 'assets/javascripts/modernizr.js' | url }}"></script>
     {% endblock %}
 
     <!-- Webfonts -->
@@ -148,11 +148,11 @@
 
     <!-- Material icons as iconset -->
     <link rel="stylesheet" type="text/css"
-        href="{{ base_url }}/assets/fonts/material-icons.css" />
+        href="{{ 'assets/fonts/material-icons.css' | url }}" />
 
     <!-- Custom stylesheets -->
     {% for path in extra_css %}
-      <link rel="stylesheet" type="text/css" href="{{ path }}" />
+      <link rel="stylesheet" type="text/css" href="{{ path | url }}" />
     {% endfor %}
 
     <!-- Custom front matter -->
@@ -203,7 +203,7 @@
 
     <!-- Render "skip to content" link -->
     {% if page.toc | first is defined %}
-      <a href="{{ (page.toc | first).url }}" tabindex="1"
+      <a href="{{ (page.toc | first).url | url }}" tabindex="1"
           class="md-skip">
         {{ lang.t('skip.link.title') }}
       </a>
@@ -322,26 +322,27 @@
 
     <!-- Theme-related JavaScript -->
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application.js"></script>
+      <script src="{{ '/assets/javascripts/application.js' | url }}"></script>
 
       <!-- Load additional languages for search -->
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}
-          {% set path = base_url + "/assets/javascripts/lunr" %}
+          {% set path = "/assets/javascripts/lunr/" %}
-          <script src="{{ path }}/lunr.stemmer.support.js"></script>
+          <script src="{{ path + 'lunr.stemmer.support.js' | url }}"></script>
           {% for language in languages | map("trim") %}
             {% if language != "en" %}
               {% if language == "jp" %}
-                <script src="{{ path }}/tinyseg.js"></script>
+                <script src="{{ path + 'tinyseg.js' | url }}"></script>
               {% endif %}
               {% if language in ($md-lunr-languages$) %}
-                <script src="{{ path }}/lunr.{{ language }}.js"></script>
+                <script src="{{ path + 'lunr.' + language + '.js' | url }}">
+                </script>
               {% endif %}
             {% endif %}
           {% endfor %}
           {% if languages | length > 1 %}
-            <script src="{{ path }}/lunr.multi.js"></script>
+            <script src="{{ path + 'lunr.multi.js' | url }}"></script>
           {% endif %}
         {% endif %}
       {% endif %}
@@ -356,7 +357,7 @@
         });
       </script>
       {% for path in extra_javascript %}
-        <script src="{{ path }}"></script>
+        <script src="{{ path | url }}"></script>
       {% endfor %}
     {% endblock %}
 

src/partials/footer.html

@@ -32,7 +32,7 @@
 
         <!-- Link to previous page -->
         {% if page.previous_page %}
-          <a href="{{ page.previous_page.url }}"
+          <a href="{{ page.previous_page.url | url }}"
               title="{{ page.previous_page.title }}"
               class="md-flex md-footer-nav__link md-footer-nav__link--prev"
               rel="prev">
@@ -54,7 +54,8 @@
 
         <!-- Link to next page -->
         {% if page.next_page %}
-          <a href="{{ page.next_page.url }}" title="{{ page.next_page.title }}"
+          <a href="{{ page.next_page.url | url }}"
+              title="{{ page.next_page.title }}"
               class="md-flex md-footer-nav__link md-footer-nav__link--next"
               rel="next">
             <div class="md-flex__cell md-flex__cell--stretch

src/partials/header.html

@@ -29,16 +29,13 @@
 
       <!-- Link to home -->
       <div class="md-flex__cell md-flex__cell--shrink">
-        <a href="{{ config.site_url | default(nav.homepage.url, true) }}"
+        <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
             title="{{ config.site_name }}"
             class="md-header-nav__button md-logo">
           {% if config.theme.logo.icon %}
             <i class="md-icon">{{ config.theme.logo.icon }}</i>
-          {% elif config.theme.logo.startswith("http") %}
-            <img src="{{ config.theme.logo }}" width="24" height="24" />
           {% else %}
-            <img src="{{ base_url }}/{{ config.theme.logo }}"
+            <img src="{{ config.theme.logo | url }}" width="24" height="24" />
-                width="24" height="24" />
           {% endif %}
         </a>
       </div>

src/partials/nav-item.html

@@ -81,7 +81,7 @@
         {{ nav_item.title }}
       </label>
     {% endif %}
-    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+    <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}"
         class="md-nav__link md-nav__link--active">
       {{ nav_item.title }}
     </a>
@@ -95,7 +95,7 @@
 <!-- Main navigation item -->
 {% else %}
   <li class="{{ class }}">
-    <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+    <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}"
         class="md-nav__link">
       {{ nav_item.title }}
     </a>

src/partials/nav.html

@@ -25,15 +25,12 @@
 
   <!-- Site title -->
   <label class="md-nav__title md-nav__title--site" for="__drawer">
-    <a href="{{ config.site_url | default(nav.homepage.url, true) }}"
+    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}"
         title="{{ config.site_name }}" class="md-nav__button md-logo">
       {% if config.theme.logo.icon %}
         <i class="md-icon">{{ config.theme.logo.icon }}</i>
-      {% elif config.theme.logo.startswith("http") %}
-        <img src="{{ config.theme.logo }}" width="48" height="48" />
       {% else %}
-        <img src="{{ base_url }}/{{ config.theme.logo }}"
+        <img src="{{ config.theme.logo | url }}" width="48" height="48" />
-            width="48" height="48" />
       {% endif %}
     </a>
     {{ config.site_name }}

src/partials/tabs-item.html

@@ -24,12 +24,12 @@
 {% if nav_item.is_homepage %}
   <li class="md-tabs__item">
     {% if not page.ancestors | length and nav | selectattr("url", page.url) %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+      <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}"
           class="md-tabs__link md-tabs__link--active">
         {{ nav_item.title }}
       </a>
     {% else %}
-      <a href="{{ nav_item.url }}" title="{{ nav_item.title }}"
+      <a href="{{ nav_item.url | url }}" title="{{ nav_item.title }}"
           class="md-tabs__link">
         {{ nav_item.title }}
       </a>
@@ -49,12 +49,12 @@
   {% else %}
     <li class="md-tabs__item">
       {% if nav_item.active %}
-        <a href="{{ (nav_item.children | first).url }}"
+        <a href="{{ (nav_item.children | first).url | url }}"
             title="{{ title }}" class="md-tabs__link md-tabs__link--active">
           {{ title }}
         </a>
       {% else %}
-        <a href="{{ (nav_item.children | first).url }}"
+        <a href="{{ (nav_item.children | first).url | url }}"
             title="{{ title }}" class="md-tabs__link">
           {{ title }}
         </a>