Documentation navigation fixes. (#21288)

* Make /utilities/ redirect to /utilities/borders/.

* Rewrite sidebar active link logic to ensure superstrings are not selected.

docs/_includes/nav-docs.html

@@ -4,36 +4,33 @@
 </form>
 
 <nav class="bd-links" id="docsNavbarContent">
+  {% assign page_slug = page.url | split: '/' | last %}
   {% for group in site.data.nav %}
   {% assign link = group.pages | first %}
-  {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
+  {% assign link_slug = link.title | slugify %}
+  {% assign group_slug = group.title | slugify %}
   {% assign active = nil %}
 
-  {% if page.url contains slug %}
+  {% if page.group == group_slug %}
     {% assign active = 'active' %}
   {% endif %}
 
   <div class="bd-toc-item {{ active }}">
-    {% if slug == "examples" %}
+      <a class="bd-toc-link" href="{{ site.baseurl }}/{{ group_slug }}/{{ link_slug }}{% if link_slug %}/{% endif %}">
-        <a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/">
-      {% else %}
-        <a class="bd-toc-link" href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ link.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-'  }}{% if link.title || page.title %}/{% endif %}">
-      {% endif %}
         {{ group.title }}
       </a>
 
       <ul class="nav bd-sidenav">
         {% for doc in group.pages %}
-          {% assign slug = doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' %}
+          {% assign doc_slug = doc.title | slugify %}
-          {% capture slug %}/{{ slug }}{% endcapture %}
           {% assign active = nil %}
 
-          {% if page.url contains slug %}
+          {% if page.group == group_slug and page_slug == doc_slug %}
             {% assign active = 'active bd-sidenav-active' %}
           {% endif %}
 
           <li class="{{ active }}">
-            <a href="{{ site.baseurl }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace:'-&-','-' }}/">
+            <a href="{{ site.baseurl }}/{{ group_slug }}/{{ doc_slug }}/">
               {{ doc.title }}
             </a>
 

docs/utilities/borders.md

@@ -2,6 +2,7 @@
 layout: docs
 title: Borders
 group: utilities
+redirect_from: "/utilities/"
 ---
 
 Use border utilities to quickly style the `border` and `border-radius` of an element. Great for images, buttons, or any other element.