x
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>BREADCRUMB:</strong> Horizontal navigation trail showing the user's location in a hierarchy.<br> <strong>CLASSES:</strong> .breadcrumb | .breadcrumb-item | .breadcrumb-item.active | .breadcrumb-item-icon </p> <p class="tw:mb-0 tw:text-sm"> Breadcrumbs provide a secondary navigation scheme to help users understand their current location within a site hierarchy. Wrap in a <code><nav aria-label="Breadcrumb"></code> for accessibility. The current page uses <code>.active</code> and <code>aria-current="page"</code>. </p> </div> <!-- Section: Basic Breadcrumb --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Basic Breadcrumb</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Basic:</strong> Simple text-based breadcrumb with linked ancestors and an active current page. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Settings</a></li> <li class="breadcrumb-item active" aria-current="page">Saved Schools</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav aria-label="Breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Current</li></ol></nav></code> </div> </div> <!-- Section: With Home Icon --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">With Home Icon</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Icon:</strong> The first breadcrumb item can use an icon (e.g. home) instead of text. Apply <code>.breadcrumb-item-icon</code> to the SVG. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#" aria-label="Home"> <i class="fa-solid fa-house breadcrumb-item-icon"></i> </a> </li> <li class="breadcrumb-item"><a href="#">Browse Schools</a></li> <li class="breadcrumb-item"><a href="#">Hills Road Sixth Form</a></li> <li class="breadcrumb-item active" aria-current="page">Course Details</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><li class="breadcrumb-item"><a href="#" aria-label="Home"><svg class="breadcrumb-item-icon">...</svg></a></li></code> </div> </div> <!-- Section: Two levels --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Two Levels</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Short:</strong> A minimal breadcrumb with just a parent and the current page. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">My Shortlist</a></li> <li class="breadcrumb-item active" aria-current="page">Compare Schools</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Parent</a></li><li class="breadcrumb-item active">Current</li></ol></code> </div> </div> <!-- Section: Deep hierarchy --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Deep Hierarchy</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Deep:</strong> Breadcrumbs gracefully handle longer paths with wrapping. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#" aria-label="Home"> <i class="fa-solid fa-house breadcrumb-item-icon"></i> </a> </li> <li class="breadcrumb-item"><a href="#">Browse</a></li> <li class="breadcrumb-item"><a href="#">Manchester</a></li> <li class="breadcrumb-item"><a href="#">Sixth Forms</a></li> <li class="breadcrumb-item"><a href="#">Science & Maths</a></li> <li class="breadcrumb-item active" aria-current="page">Course Details</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>Breadcrumbs use <strong>flex-wrap</strong> so deep hierarchies wrap naturally to the next line.</code> </div> </div></div>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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>BREADCRUMB:</strong> Horizontal navigation trail showing the user's location in a hierarchy.<br> <strong>CLASSES:</strong> .breadcrumb | .breadcrumb-item | .breadcrumb-item.active | .breadcrumb-item-icon </p> <p class="tw:mb-0 tw:text-sm"> Breadcrumbs provide a secondary navigation scheme to help users understand their current location within a site hierarchy. Wrap in a <code><nav aria-label="Breadcrumb"></code> for accessibility. The current page uses <code>.active</code> and <code>aria-current="page"</code>. </p> </div> <!-- Section: Basic Breadcrumb --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Basic Breadcrumb</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Basic:</strong> Simple text-based breadcrumb with linked ancestors and an active current page. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Settings</a></li> <li class="breadcrumb-item active" aria-current="page">Saved Schools</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><nav aria-label="Breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Current</li></ol></nav></code> </div> </div> <!-- Section: With Home Icon --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">With Home Icon</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Icon:</strong> The first breadcrumb item can use an icon (e.g. home) instead of text. Apply <code>.breadcrumb-item-icon</code> to the SVG. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#" aria-label="Home"> <i class="fa-solid fa-house breadcrumb-item-icon"></i> </a> </li> <li class="breadcrumb-item"><a href="#">Browse Schools</a></li> <li class="breadcrumb-item"><a href="#">Hills Road Sixth Form</a></li> <li class="breadcrumb-item active" aria-current="page">Course Details</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><li class="breadcrumb-item"><a href="#" aria-label="Home"><svg class="breadcrumb-item-icon">...</svg></a></li></code> </div> </div> <!-- Section: Two levels --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Two Levels</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Short:</strong> A minimal breadcrumb with just a parent and the current page. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">My Shortlist</a></li> <li class="breadcrumb-item active" aria-current="page">Compare Schools</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ol class="breadcrumb"><li class="breadcrumb-item"><a href="#">Parent</a></li><li class="breadcrumb-item active">Current</li></ol></code> </div> </div> <!-- Section: Deep hierarchy --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Deep Hierarchy</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Deep:</strong> Breadcrumbs gracefully handle longer paths with wrapping. </p> </div> <nav aria-label="Breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"> <a href="#" aria-label="Home"> <i class="fa-solid fa-house breadcrumb-item-icon"></i> </a> </li> <li class="breadcrumb-item"><a href="#">Browse</a></li> <li class="breadcrumb-item"><a href="#">Manchester</a></li> <li class="breadcrumb-item"><a href="#">Sixth Forms</a></li> <li class="breadcrumb-item"><a href="#">Science & Maths</a></li> <li class="breadcrumb-item active" aria-current="page">Course Details</li> </ol> </nav> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>Breadcrumbs use <strong>flex-wrap</strong> so deep hierarchies wrap naturally to the next line.</code> </div> </div></div>No notes provided.
No params configured.