Components

Breadcrumb

Breadcrumbs provide secondary navigation to help users understand where they are in a website.

A breadcrumb bar (or breadcrumbs, or breadcrumb trail) is a series of links that describes the hierarchical relationship between the current page and the overall site structure. Breadcrumbs allow a user to navigate “up” instead of using the “Back” button to return to the previous page. A breadcrumb bar facilitates orientation when a user navigates to an interior page from a web search or link from another site.

Default breadcrumb
Breadcrumb with RDFa metadata
Wrapping breadcrumb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<h6>Default breadcrumb</h6>
<nav class="usa-breadcrumb" aria-label="Breadcrumbs">
  <ol class="usa-breadcrumb__list">
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Home</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Federal Contracting</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Contracting assistance programs</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
      <span>Women-owned small business federal contracting program</span>
    </li>
  </ol>
</nav>

<h6>Breadcrumb with RDFa metadata</h6>
<nav class="usa-breadcrumb" aria-label="Breadcrumbs">
  <ol vocab="http://schema.org/" typeof="BreadcrumbList" class="usa-breadcrumb__list">
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
      <a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
        <span property="name">Home</span>
      </a>
      <meta property="position" content="1">
    </li>
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
      <a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
        <span property="name">Federal Contracting</span>
      </a>
      <meta property="position" content="2">
    </li>
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
      <a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
        <span property="name">Contracting assistance programs</span>
      </a>
      <meta property="position" content="3">
    </li>
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item usa-current" aria-current="page">
      <span property="name">Women-owned small business federal contracting program</span>
      <meta property="position" content="4">
    </li>
  </ol>
</nav>

<h6>Wrapping breadcrumb</h6>
<nav class="usa-breadcrumb usa-breadcrumb--wrap" aria-label="Breadcrumbs">
  <ol class="usa-breadcrumb__list">
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Home</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Federal Contracting</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Contracting assistance programs</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
      <span>Women-owned small business federal contracting program</span>
    </li>
  </ol>
</nav>