{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">Breadcrumbs provide secondary navigation to help users understand where they are in a website.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-breadcrumb>
    <c-breadcrumb.breadcrumb_item href="/" list_item="Home" />
    <c-breadcrumb.breadcrumb_item href="/services" list_item="Federal Services" />
    <c-breadcrumb.breadcrumb_item href="/services/benefits" list_item="Benefits" />
    <c-breadcrumb.breadcrumb_item href="/services/benefits/apply" list_item="Apply for Benefits" aria_current="page" />
</c-breadcrumb>

<h2 class="font-heading-xl margin-top-4">Wrapping</h2>
<c-breadcrumb wrapped="true">
    <c-breadcrumb.breadcrumb_item href="/" list_item="Home" />
    <c-breadcrumb.breadcrumb_item href="/agency" list_item="Department of Health and Human Services" />
    <c-breadcrumb.breadcrumb_item href="/agency/divisions" list_item="Administration for Children and Families" />
    <c-breadcrumb.breadcrumb_item href="/agency/divisions/programs" list_item="Office of Family Assistance" />
    <c-breadcrumb.breadcrumb_item href="/agency/divisions/programs/grants" list_item="Temporary Assistance for Needy Families" aria_current="page" />
</c-breadcrumb>
{% endblock %}