<nav id="example-breadcrumb" aria-label="Breadcrumb" class="cwf-breadcrumb">
    <ol class="cwf-breadcrumb__list">
        <li class="cwf-breadcrumb__item cwf-breadcrumb__item--has-dropdown">
            <button class="cwf-breadcrumb__toggle">
                <i class="fas fa-ellipsis-h cwf-breadcrumb__icon">

                </i>
                <span class="cwf-breadcrumb__text">More</span>
            </button>
            <ol class="cwf-breadcrumb__list cwf-breadcrumb__list--dropdown">
                <li class="cwf-breadcrumb__item">
                    <a href="/" class="cwf-breadcrumb__link">
                        <i class="fas fa-home cwf-breadcrumb__icon"></i>
                        <span class="cwf-breadcrumb__text">Home</span>
                    </a>
                </li>

                <li class="cwf-breadcrumb__item">
                    <a href="/components/" class="cwf-breadcrumb__link">
                        Components
                    </a>
                </li>
                <li class="cwf-breadcrumb__item">
                    <a href="/components/global/" class="cwf-breadcrumb__link">
                        Global
                    </a>
                </li>
            </ol>
        </li>
        <li class="cwf-breadcrumb__item">
            <a href="/components/global/navigation/" class="cwf-breadcrumb__link">
                Navigation
            </a>
        </li>
        <li class="cwf-breadcrumb__item">
            Main navigation
        </li>
    </ol>
</nav>
{% set break = false %}

{% set homeItem %}
    <li class="cwf-breadcrumb__item">
        <a href="/" class="cwf-breadcrumb__link">
            <i class="fas fa-home cwf-breadcrumb__icon"></i>
            <span class="cwf-breadcrumb__text">Home</span>
        </a>
    </li>
{% endset %}

<nav id="{{ id ?? 'cwf-breadcrumb' }}"
    aria-label="Breadcrumb"
    class="cwf-breadcrumb">
    <ol class="cwf-breadcrumb__list">
        {% for route in routes if not break %}
            {% if route.name.full == title or route.name == title %}
                {% if route.parents is defined %}
                    {% set parents = route.parents %}
                    {% if (parents|length) > 1 %}
                        <li class="cwf-breadcrumb__item cwf-breadcrumb__item--has-dropdown">
                            <button class="cwf-breadcrumb__toggle">
                                <i class="fas fa-ellipsis-h cwf-breadcrumb__icon">

                                </i>
                                <span class="cwf-breadcrumb__text">More</span>
                            </button>
                            <ol class="cwf-breadcrumb__list cwf-breadcrumb__list--dropdown">
                                {{ homeItem }}
                                {% for parent in parents %}
                                    {% if parent != (parents|last) %}
                                        <li class="cwf-breadcrumb__item">
                                            <a href="{{ parent.href }}"
                                                class="cwf-breadcrumb__link">
                                                {{ parent.name.short
                                                    ?? parent.name.full
                                                    ?? parent.name }}
                                            </a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            </ol>
                        </li>
                    {% else %}
                        {{ homeItem }}
                    {% endif %}
                    {% set parent = parents|last %}
                    <li class="cwf-breadcrumb__item">
                        <a href="{{ parent.href }}"
                            class="cwf-breadcrumb__link">
                            {{ parent.name.full ?? parent.name }}
                        </a>
                    </li>
                {% else %}
                    {{ homeItem }}
                {% endif %}
                <li class="cwf-breadcrumb__item">
                    {{ route.name.full ?? route.name }}
                </li>
                {% set break = true %}
            {% endif %}
        {% endfor %}
    </ol>
</nav>

{# CMS implementation note: "The link to the current page has aria-current set to page. If the element representing the current page is not a link, aria-current is optional." Since we can't set the aria-current automatically in T4 we can just not make the last item a link. #}
{
  "id": "example-breadcrumb",
  "routes": [
    {
      "level": 1,
      "name": "Blog",
      "href": "https://blogs.vcu.edu/compass/"
    },
    {
      "level": 1,
      "name": "Components",
      "href": "/components/",
      "children": [
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        },
        {
          "name": {
            "full": "Content components",
            "short": "Content"
          },
          "href": "/components/content/",
          "children": [
            {
              "name": "Accordion",
              "href": "/components/content/accordion/"
            },
            {
              "name": "Card",
              "href": "/components/content/card/"
            },
            {
              "name": "Hero",
              "href": "/components/content/hero/"
            },
            {
              "name": "Modal",
              "href": "/components/content/modal/"
            },
            {
              "name": "Notification",
              "href": "/components/content/notification/"
            },
            {
              "name": "Tabs",
              "href": "/components/content/tabs/"
            }
          ]
        }
      ]
    },
    {
      "level": 2,
      "name": {
        "full": "Global components",
        "short": "Global"
      },
      "href": "/components/global/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        }
      ],
      "children": [
        {
          "name": "Breadcrumb",
          "href": "/components/global/breadcrumb/"
        },
        {
          "name": "Button",
          "href": "/components/global/button/"
        },
        {
          "name": "Footer",
          "href": "/components/global/footer/"
        },
        {
          "name": "Form",
          "href": "/components/global/form/"
        },
        {
          "name": "General content",
          "href": "/components/global/general-content/"
        },
        {
          "name": "Grid",
          "href": "/components/global/grid/"
        },
        {
          "name": "Header",
          "href": "/components/global/header/"
        },
        {
          "name": "Navigation",
          "href": "/components/global/navigation/",
          "children": [
            {
              "name": "Main navigation",
              "href": "/components/global/navigation/main/"
            },
            {
              "name": "Sub navigation",
              "href": "/components/global/navigation/sub/"
            }
          ]
        },
        {
          "name": "Skip links",
          "href": "/components/global/skip-links/"
        }
      ]
    },
    {
      "level": 3,
      "name": "Breadcrumb",
      "href": "/components/global/breadcrumb/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Button",
      "href": "/components/global/button/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Footer",
      "href": "/components/global/footer/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Form",
      "href": "/components/global/form/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "General content",
      "href": "/components/global/general-content/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Grid",
      "href": "/components/global/grid/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Header",
      "href": "/components/global/header/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Navigation",
      "href": "/components/global/navigation/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ],
      "children": [
        {
          "name": "Main navigation",
          "href": "/components/global/navigation/main/"
        },
        {
          "name": "Sub navigation",
          "href": "/components/global/navigation/sub/"
        }
      ]
    },
    {
      "level": 4,
      "name": "Main navigation",
      "href": "/components/global/navigation/main/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        },
        {
          "name": "Navigation",
          "href": "/components/global/navigation/",
          "children": [
            {
              "name": "Main navigation",
              "href": "/components/global/navigation/main/"
            },
            {
              "name": "Sub navigation",
              "href": "/components/global/navigation/sub/"
            }
          ]
        }
      ]
    },
    {
      "level": 4,
      "name": "Sub navigation",
      "href": "/components/global/navigation/sub/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        },
        {
          "name": "Navigation",
          "href": "/components/global/navigation/",
          "children": [
            {
              "name": "Main navigation",
              "href": "/components/global/navigation/main/"
            },
            {
              "name": "Sub navigation",
              "href": "/components/global/navigation/sub/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Skip links",
      "href": "/components/global/skip-links/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Global components",
            "short": "Global"
          },
          "href": "/components/global/",
          "children": [
            {
              "name": "Breadcrumb",
              "href": "/components/global/breadcrumb/"
            },
            {
              "name": "Button",
              "href": "/components/global/button/"
            },
            {
              "name": "Footer",
              "href": "/components/global/footer/"
            },
            {
              "name": "Form",
              "href": "/components/global/form/"
            },
            {
              "name": "General content",
              "href": "/components/global/general-content/"
            },
            {
              "name": "Grid",
              "href": "/components/global/grid/"
            },
            {
              "name": "Header",
              "href": "/components/global/header/"
            },
            {
              "name": "Navigation",
              "href": "/components/global/navigation/",
              "children": [
                {
                  "name": "Main navigation",
                  "href": "/components/global/navigation/main/"
                },
                {
                  "name": "Sub navigation",
                  "href": "/components/global/navigation/sub/"
                }
              ]
            },
            {
              "name": "Skip links",
              "href": "/components/global/skip-links/"
            }
          ]
        }
      ]
    },
    {
      "level": 2,
      "name": {
        "full": "Content components",
        "short": "Content"
      },
      "href": "/components/content/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        }
      ],
      "children": [
        {
          "name": "Accordion",
          "href": "/components/content/accordion/"
        },
        {
          "name": "Card",
          "href": "/components/content/card/"
        },
        {
          "name": "Hero",
          "href": "/components/content/hero/"
        },
        {
          "name": "Modal",
          "href": "/components/content/modal/"
        },
        {
          "name": "Notification",
          "href": "/components/content/notification/"
        },
        {
          "name": "Tabs",
          "href": "/components/content/tabs/"
        }
      ]
    },
    {
      "level": 3,
      "name": "Accordion",
      "href": "/components/content/accordion/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Content components",
            "short": "Content"
          },
          "href": "/components/content/",
          "children": [
            {
              "name": "Accordion",
              "href": "/components/content/accordion/"
            },
            {
              "name": "Card",
              "href": "/components/content/card/"
            },
            {
              "name": "Hero",
              "href": "/components/content/hero/"
            },
            {
              "name": "Modal",
              "href": "/components/content/modal/"
            },
            {
              "name": "Notification",
              "href": "/components/content/notification/"
            },
            {
              "name": "Tabs",
              "href": "/components/content/tabs/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Card",
      "href": "/components/content/card/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Content components",
            "short": "Content"
          },
          "href": "/components/content/",
          "children": [
            {
              "name": "Accordion",
              "href": "/components/content/accordion/"
            },
            {
              "name": "Card",
              "href": "/components/content/card/"
            },
            {
              "name": "Hero",
              "href": "/components/content/hero/"
            },
            {
              "name": "Modal",
              "href": "/components/content/modal/"
            },
            {
              "name": "Notification",
              "href": "/components/content/notification/"
            },
            {
              "name": "Tabs",
              "href": "/components/content/tabs/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Hero",
      "href": "/components/content/hero/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Content components",
            "short": "Content"
          },
          "href": "/components/content/",
          "children": [
            {
              "name": "Accordion",
              "href": "/components/content/accordion/"
            },
            {
              "name": "Card",
              "href": "/components/content/card/"
            },
            {
              "name": "Hero",
              "href": "/components/content/hero/"
            },
            {
              "name": "Modal",
              "href": "/components/content/modal/"
            },
            {
              "name": "Notification",
              "href": "/components/content/notification/"
            },
            {
              "name": "Tabs",
              "href": "/components/content/tabs/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Modal",
      "href": "/components/content/modal/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Content components",
            "short": "Content"
          },
          "href": "/components/content/",
          "children": [
            {
              "name": "Accordion",
              "href": "/components/content/accordion/"
            },
            {
              "name": "Card",
              "href": "/components/content/card/"
            },
            {
              "name": "Hero",
              "href": "/components/content/hero/"
            },
            {
              "name": "Modal",
              "href": "/components/content/modal/"
            },
            {
              "name": "Notification",
              "href": "/components/content/notification/"
            },
            {
              "name": "Tabs",
              "href": "/components/content/tabs/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Notification",
      "href": "/components/content/notification/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Content components",
            "short": "Content"
          },
          "href": "/components/content/",
          "children": [
            {
              "name": "Accordion",
              "href": "/components/content/accordion/"
            },
            {
              "name": "Card",
              "href": "/components/content/card/"
            },
            {
              "name": "Hero",
              "href": "/components/content/hero/"
            },
            {
              "name": "Modal",
              "href": "/components/content/modal/"
            },
            {
              "name": "Notification",
              "href": "/components/content/notification/"
            },
            {
              "name": "Tabs",
              "href": "/components/content/tabs/"
            }
          ]
        }
      ]
    },
    {
      "level": 3,
      "name": "Tabs",
      "href": "/components/content/tabs/",
      "parents": [
        {
          "name": "Components",
          "href": "/components/",
          "children": [
            {
              "name": {
                "full": "Global components",
                "short": "Global"
              },
              "href": "/components/global/",
              "children": [
                {
                  "name": "Breadcrumb",
                  "href": "/components/global/breadcrumb/"
                },
                {
                  "name": "Button",
                  "href": "/components/global/button/"
                },
                {
                  "name": "Footer",
                  "href": "/components/global/footer/"
                },
                {
                  "name": "Form",
                  "href": "/components/global/form/"
                },
                {
                  "name": "General content",
                  "href": "/components/global/general-content/"
                },
                {
                  "name": "Grid",
                  "href": "/components/global/grid/"
                },
                {
                  "name": "Header",
                  "href": "/components/global/header/"
                },
                {
                  "name": "Navigation",
                  "href": "/components/global/navigation/",
                  "children": [
                    {
                      "name": "Main navigation",
                      "href": "/components/global/navigation/main/"
                    },
                    {
                      "name": "Sub navigation",
                      "href": "/components/global/navigation/sub/"
                    }
                  ]
                },
                {
                  "name": "Skip links",
                  "href": "/components/global/skip-links/"
                }
              ]
            },
            {
              "name": {
                "full": "Content components",
                "short": "Content"
              },
              "href": "/components/content/",
              "children": [
                {
                  "name": "Accordion",
                  "href": "/components/content/accordion/"
                },
                {
                  "name": "Card",
                  "href": "/components/content/card/"
                },
                {
                  "name": "Hero",
                  "href": "/components/content/hero/"
                },
                {
                  "name": "Modal",
                  "href": "/components/content/modal/"
                },
                {
                  "name": "Notification",
                  "href": "/components/content/notification/"
                },
                {
                  "name": "Tabs",
                  "href": "/components/content/tabs/"
                }
              ]
            }
          ]
        },
        {
          "name": {
            "full": "Content components",
            "short": "Content"
          },
          "href": "/components/content/",
          "children": [
            {
              "name": "Accordion",
              "href": "/components/content/accordion/"
            },
            {
              "name": "Card",
              "href": "/components/content/card/"
            },
            {
              "name": "Hero",
              "href": "/components/content/hero/"
            },
            {
              "name": "Modal",
              "href": "/components/content/modal/"
            },
            {
              "name": "Notification",
              "href": "/components/content/notification/"
            },
            {
              "name": "Tabs",
              "href": "/components/content/tabs/"
            }
          ]
        }
      ]
    },
    {
      "level": 1,
      "name": "Documentation",
      "href": "https://compass.vcu.edu/"
    }
  ],
  "title": "Main navigation"
}
  • Content:
    // Breadcrumb component styles
    
    @import "../../shared/media";
    @import "../../shared/style";
    @import "../../shared/theme";
    
    // Breadcrumb colors
    $breadcrumb--separator-color: style__color(gray-lightest) !default;
    $breadcrumb--mobile-link-color: style__color(gray-light) !default;
    $breadcrumb--desktop-link-color: style__color(blue, accent) !default;
    $breadcrumb__list--dropdown--border-color: lighten(
        style__color(white-darkest),
        6.5%
    ) !default;
    $breadcrumb__list--dropdown--background-color: style__color(white) !default;
    
    .cwf-breadcrumb {
        @include style__spacing;
        width: 100%;
        font-family: theme__font--sans-serif();
        --cwf-breadcrumb--separator-color: #{$breadcrumb--separator-color};
        --cwf-breadcrumb--mobile-link-color: #{$breadcrumb--mobile-link-color};
        --cwf-breadcrumb--desktop-link-color: #{$breadcrumb--desktop-link-color};
        --cwf-breadcrumb__list--dropdown--border-color: #{$breadcrumb__list--dropdown--border-color};
        --cwf-breadcrumb__list--dropdown--background-color: #{$breadcrumb__list--dropdown--background-color};
    }
    
    .cwf-breadcrumb__list {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 0;
        padding-top: 0;
    
        @include media__breakpoint {
            justify-content: flex-start;
        }
    }
    
    .cwf-breadcrumb__item {
        display: none;
        align-items: center;
        list-style-type: none;
        padding: 0.5rem 0;
    
        &:first-child {
            display: inline-flex;
            order: 1;
    
            @include media__breakpoint {
                order: 0;
            }
        }
    
        &:nth-last-child(2) {
            display: inline-flex;
    
            & .cwf-breadcrumb__link {
                display: inline-flex;
                align-items: baseline;
            }
    
            & .cwf-breadcrumb__link:before {
                content: "\f053";
                display: inline-flex;
                width: 1rem;
                height: 1rem;
                -webkit-font-smoothing: antialiased;
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                font-style: normal;
                font-variant: normal;
                text-rendering: auto;
                line-height: 1;
    
                @include media__breakpoint {
                    display: none;
                }
            }
    
            & .cwf-breadcrumb__icon {
                display: none;
            }
    
            & .cwf-breadcrumb__text {
                @include style__screen-reader--visible;
            }
        }
    
        @include media__breakpoint {
            display: inline-flex;
    
            &:after {
                content: "";
                display: inline-block;
                height: 0.8rem;
                margin-left: 0.5rem;
                margin-right: 0.5rem;
                border-right: 0.1em solid var(--cwf-breadcrumb--separator-color);
                transform: rotate(20deg);
            }
    
            &:last-child:after {
                display: none;
            }
        }
    }
    
    .cwf-breadcrumb__link {
        color: var(--cwf-breadcrumb--mobile-link-color);
        text-decoration: none;
    
        @include media__breakpoint {
            color: var(--cwf-breadcrumb--desktop-link-color);
            text-decoration: underline;
        }
    }
    
    .cwf-breadcrumb__text {
        @include style__screen-reader--only;
    
        @include media__breakpoint {
            @include style__screen-reader--visible;
        }
    }
    
    .cwf-breadcrumb__icon {
        display: inline-block;
    
        @include media__breakpoint {
            display: none;
        }
    }
    
    .cwf-breadcrumb__item--has-dropdown {
        position: relative;
    
        .cwf-breadcrumb__list--dropdown {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            width: auto;
            flex-direction: column;
            border: 1px solid var(--cwf-breadcrumb__list--dropdown--border-color);
            background-color: var(
                --cwf-breadcrumb__list--dropdown--background-color
            );
    
            @include media__breakpoint {
                right: initial;
                left: 0;
            }
        }
    
        .cwf-breadcrumb__item {
            display: block;
            padding: 0;
            border-bottom: 1px solid
                var(--cwf-breadcrumb__list--dropdown--border-color);
    
            &:first-child {
                order: 0;
            }
    
            &:first-child,
            &:nth-last-child(2) {
                .cwf-breadcrumb__icon {
                    display: none;
                }
    
                .cwf-breadcrumb__text {
                    display: static;
                }
    
                .cwf-breadcrumb__link:before {
                    display: none;
                }
            }
    
            &:last-child {
                border-bottom: none;
            }
    
            &:after {
                display: none;
            }
        }
    
        .cwf-breadcrumb__link {
            display: flex !important;
            padding: 0.5rem 1rem;
            text-decoration: none;
            @include animation__transition(background-color, color);
    
            &:hover,
            &:focus {
                background-color: var(--cwf-breadcrumb--desktop-link-color);
                color: var(--cwf-breadcrumb__list--dropdown--background-color);
            }
    
            .cwf-breadcrumb__text {
                @include style__screen-reader--visible;
            }
        }
    }
    
    .cwf-breadcrumb__toggle {
        padding: 0;
        border: none;
        background-color: transparent;
        font-size: 1rem;
        font-weight: bold;
        color: var(--cwf-breadcrumb--mobile-link-color);
    
        @include media__breakpoint {
            color: var(--cwf-breadcrumb--desktop-link-color);
            text-decoration: underline;
        }
    }
    
    .cwf-breadcrumb__item--expand-dropdown {
        .cwf-breadcrumb__list--dropdown {
            display: flex;
            @include style__z-index(menu);
        }
    }
    
  • URL: /components/raw/breadcrumb/_index.scss
  • Filesystem Path: components/breadcrumb/_index.scss
  • Size: 5.6 KB
  • Content:
    // The default component class
    import { Component } from '../../shared/component';
    
    // Provide functionality to the breadcrumb
    export class Breadcrumb extends Component {
        constructor({
            breadcrumb = 'cwf-breadcrumb',
            list = 'cwf-breadcrumb__list',
            listIsDropdown = 'cwf-breadcrumb__list--dropdown',
            item = 'cwf-breadcrumb__item',
            itemHasDropdown = 'cwf-breadcrumb__item--has-dropdown',
            itemExpandDropdown = 'cwf-breadcrumb__item--expand-dropdown',
            link = 'cwf-breadcrumb__link',
            toggle = 'cwf-breadcrumb__toggle'
        } = {}) {
            super();
    
            // Store all relavent selectors...
            this.selectors = {
                breadcrumb,
                list,
                listIsDropdown,
                item,
                itemHasDropdown,
                itemExpandDropdown,
                link,
                toggle
            };
            // ... and initialize an object for references
            this.references = {};
    
            // Set the run/expanded states to false...
            this.run = false;
            this.expanded = false;
            // ... and bind "this" to the appropriate methods
            this.breadcrumbKeyboardNavigation = this.breadcrumbKeyboardNavigation.bind(
                this
            );
            this.closeDropdownGlobally = this.closeDropdownGlobally.bind(this);
            this.dropdownKeyboardNavigation = this.dropdownKeyboardNavigation.bind(
                this
            );
            this.toggleDropdown = this.toggleDropdown.bind(this);
        }
    
        // Return whether to add/remove an event listener given a state
        listener(state) {
            if (state) return 'addEventListener';
            return 'removeEventListener';
        }
    
        // Return whether to add/remove an event listener given the run state
        get runListener() {
            return this.listener(this.run);
        }
    
        // Return whether to add/remove an event listener given the expanded state
        get expandedListener() {
            return this.listener(this.expanded);
        }
    
        // Breadcrumb keyboard navigation
        breadcrumbKeyboardNavigation(event) {
            // Grab the type and current target from the event
            const { type, currentTarget } = event;
    
            // Handle whether to add/remove a keydown event listener based on the event type...
            switch (type) {
                case 'focus': // Focus = add keydown event listener
                    currentTarget.addEventListener(
                        'keydown',
                        this.breadcrumbKeyboardNavigation
                    );
                    break;
                case 'blur': // Blur = remove keydown event listener
                    currentTarget.removeEventListener(
                        'keydown',
                        this.breadcrumbKeyboardNavigation
                    );
            }
            // ... and if this isn't a keydown event, do nothing else
            if (type !== 'keydown') return;
    
            // Grab the key from the event...
            const { key } = event;
            // ... and if the key isn't home, left/right arrows, or end, do nothing else
            if (!['Home', 'ArrowLeft', 'ArrowRight', 'End'].includes(key)) return;
    
            // Prevent the default action
            event.preventDefault();
    
            // Create a list of focusable elements...
            const focusable = [
                this.references.dropdown ? this.references.dropdown.toggle : null,
                ...this.references.breadcrumb.links
            ].filter(Boolean);
            // ... and figure out the first/last focusable element as well as the currently focused element's index
            const firstIndex = 0,
                firstFocusable = focusable[firstIndex],
                index = focusable.indexOf(currentTarget),
                lastIndex = focusable.length - 1,
                lastFocusable = focusable[lastIndex],
                isOnFirst = index === firstIndex,
                isOnLast = index === lastIndex;
    
            // Handle what to do based on what key was pressed
            switch (key) {
                case 'Home': // Home = Focus the first element
                    return firstFocusable.focus();
                case 'ArrowLeft': // Left arrow = Focus the previous element, looping around to the last element
                    return isOnFirst
                        ? lastFocusable.focus()
                        : focusable[index - 1].focus();
                case 'ArrowRight': // Right arrow = Focus the next element, looping around the first element
                    return isOnLast
                        ? firstFocusable.focus()
                        : focusable[index + 1].focus();
                case 'End': // End = Focus the last element
                    return lastFocusable.focus();
            }
        }
    
        // Grabs/stores a reference to the breadcrumb
        breadcrumb() {
            // Attempt to grab the breadcrumb...
            const element = this.references.breadcrumb
                ? this.references.breadcrumb.element
                : document.querySelector(`.${this.selectors.breadcrumb}`);
            // ... and if it doesn't exist, do nothing else
            if (!element) return;
    
            // Otherwise, grab the breadcrumb's direct links...
            const links = this.references.breadcrumb
                ? this.references.breadcrumb.links
                : Array.from(
                      document.querySelectorAll(
                          `.${this.selectors.breadcrumb} > .${this.selectors.list} > .${this.selectors.item} > .${this.selectors.link}`
                      )
                  );
            // ... and bind to their focus/blur events for keyboard navigation
            links.forEach((link) => {
                link[this.runListener](
                    'focus',
                    this.breadcrumbKeyboardNavigation,
                    false
                );
                link[this.runListener](
                    'blur',
                    this.breadcrumbKeyboardNavigation,
                    false
                );
            });
    
            // If the run state is false, delete the breadcrumb reference...
            if (!this.run) return delete this.references.breadcrumb;
            // ... otherwise, store a reference to the breadcrumb and its links
            this.references.breadcrumb = {
                element,
                links
            };
        }
    
        // Close the dropdown globally
        closeDropdownGlobally(event) {
            // Grab the type, key, and target from the event...
            const { type, key, target } = event;
            // ... and if the type is keydown but the key is not "Escape", do nothing else
            if (type === 'keydown' && key !== 'Escape') return;
    
            // Grab all dropdown references....
            const { parent, toggle, list, links } = this.references.dropdown;
            // ... and create a list of valid targets
            let targets = [
                parent,
                toggle,
                ...Array.from(toggle.children),
                list,
                ...links
            ];
    
            // Add all link children to the list of valid targets
            links.forEach(({ children }) => {
                targets.push(...children);
            });
    
            // If this is a click event and one of the valid targets were clicked, do nothing else
            if (type === 'click' && targets.includes(target)) return;
    
            // Otherwise, close the dropdown
            return this.toggleDropdown(false);
        }
    
        // Toggle the dropdown open/close
        toggleDropdown(event) {
            // Store whether the event is forced...
            const forced = typeof event === 'boolean';
            // ... and set whether the dropdown will be expanded or collapsed
            this.expanded = forced ? event : !this.expanded;
    
            // Grab the dropdown parent
            const { parent } = this.references.dropdown;
    
            // Add/remove the expanded class to the dropdown parent based on the expanded state
            parent.classList.toggle(
                this.selectors.itemExpandDropdown,
                this.expanded
            );
    
            // When an animation frame is available...
            window.requestAnimationFrame(() => {
                // If the event was a click, add a global keydown event to close the dropdown
                if (event.detail)
                    document[this.expandedListener](
                        'keydown',
                        this.closeDropdownGlobally
                    );
    
                // Add a global click event to close the dropdown
                document[this.expandedListener](
                    'click',
                    this.closeDropdownGlobally
                );
            });
    
            // If the event was a click...
            if (event.detail) return;
            // ... or the dropdown has been collapsed, do nothing else
            if (!this.expanded) return;
    
            // Grab all the dropdown links...
            const { links } = this.references.dropdown;
            // ... and focus the first one
            links[0].focus();
        }
    
        // Dropdown keyboard navigation
        dropdownKeyboardNavigation(event) {
            // Grab the type and current target from the event
            const { type, currentTarget } = event;
    
            // Handle whether to add/remove a keydown event listener based on the event type...
            switch (type) {
                case 'focus': // Focus = add keydown event listener
                    currentTarget.addEventListener(
                        'keydown',
                        this.dropdownKeyboardNavigation
                    );
                    break;
                case 'blur': // Blur = remove keydown event listener
                    currentTarget.removeEventListener(
                        'keydown',
                        this.dropdownKeyboardNavigation
                    );
            }
            // ... and if this isn't a keydown event, do nothing else
            if (type !== 'keydown') return;
    
            // Grab the key from the event...
            const { key } = event;
            // ... and if it's escape,...
            if (key === 'Escape') {
                // ... close the dropdown,...
                this.toggleDropdown(false);
                // ... and focus the dropdown toggle
                return this.references.dropdown.toggle.focus();
            }
    
            // If the key isn't home, up/down arrows, or end, do nothing else
            if (!['Home', 'ArrowUp', 'ArrowDown', 'End'].includes(key)) return;
    
            // Prevent the default action
            event.preventDefault();
    
            // Grab the dropdown links...
            const { links } = this.references.dropdown;
            // ... and figure out the first/last links as well as the currently focused link's index
            const firstIndex = 0,
                firstLink = links[firstIndex],
                index = links.indexOf(currentTarget),
                lastIndex = links.length - 1,
                lastLink = links[lastIndex],
                isOnFirst = index === firstIndex,
                isOnLast = index === lastIndex;
    
            // Handle what to do based on what key was pressed
            switch (key) {
                case 'Home': // Home = Focus the first link
                    return firstLink.focus();
                case 'ArrowUp': // Up arrow = Focus the previous link, looping around to the last link
                    return isOnFirst ? lastLink.focus() : links[index - 1].focus();
                case 'ArrowDown': // Down arrow = Focus the previous, looping around the first link
                    return isOnLast ? firstLink.focus() : links[index + 1].focus();
                case 'End': // End = Focus the last link
                    return lastLink.focus();
            }
        }
    
        // Grab/setup the dropdown
        dropdown() {
            // If a reference to the breadcrumb doesn't exist, do nothing else
            if (!this.references.breadcrumb) return;
    
            // Attempt to grab the dropdown parent...
            const parent = this.references.dropdown
                ? this.references.dropdown.parent
                : this.references.breadcrumb.element.querySelector(
                      `.${this.selectors.itemHasDropdown}`
                  );
            // ... and if it doesn't exist, do nothing else
            if (!parent) return;
    
            // Otherwise, grab the dropdown toggle, list, and links
            const toggle = this.references.dropdown
                ? this.references.dropdown.toggle
                : parent.querySelector(`.${this.selectors.toggle}`);
            const list = this.references.dropdown
                ? this.references.dropdown.list
                : parent.querySelector(`.${this.selectors.listIsDropdown}`);
            const links = this.references.dropdown
                ? this.references.dropdown.links
                : Array.from(parent.querySelectorAll(`.${this.selectors.link}`));
    
            // Add/remove a click event listener to the dropdown toggle to expand/collapse the dropdown...
            toggle[this.runListener]('click', this.toggleDropdown, false);
            // ... and a focus/blur event listener to it for keyboard navigation,...
            toggle[this.runListener](
                'focus',
                this.breadcrumbKeyboardNavigation,
                false
            );
            toggle[this.runListener](
                'blur',
                this.breadcrumbKeyboardNavigation,
                false
            );
            // ... as well as focus/blur event listener to the dropdown links for keyboard navigation
            links.forEach((link) => {
                link[this.runListener](
                    'focus',
                    this.dropdownKeyboardNavigation,
                    false
                );
                link[this.runListener](
                    'blur',
                    this.dropdownKeyboardNavigation,
                    false
                );
            });
    
            // If the run state is false, delete the dropdown reference...
            if (!this.run) return delete this.references.dropdown;
            // ... otherwise, store all dropdown references
            this.references.dropdown = {
                parent,
                toggle,
                list,
                links
            };
        }
    
        // Destroy/initialize the breadcrumb functionality
        setup(state) {
            // Set the run state...
            this.run = state;
            // ... and run the breadcrumb/dropdown methods
            this.breadcrumb();
            this.dropdown();
        }
    
        // Destroy the breadcrumb functionality
        destroy() {
            this.setup(false);
        }
    
        // Initialize the breadcrumb functionality
        initialize() {
            this.setup(true);
        }
    }
    
    export default Breadcrumb;
    
  • URL: /components/raw/breadcrumb/index.js
  • Filesystem Path: components/breadcrumb/index.js
  • Size: 14.1 KB

No notes defined.