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
<nav aria-label="Breadcrumb" class="midwest-breadcrumbs style-inline"> <ol class="breadcrumbs-list"> <li class="breadcrumb-item"> <a class="midwest-breadcrumb variant-default" href="/"> <span class="midwest-label "> Home </span> </a> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char">/</span> </li> <li class="breadcrumb-item"> <ul class="midwest-dropdown-menu align--bottom-start" id="breadcrumb-dropdown-fe80" role="menu" popover="auto" style="position-anchor: --breadcrumb-dropdown-fe80;" data-controller="midwest-dropdown" data-dropdown-computed-positioning-value="false" data-dropdown-align-value="bottom-start"> <button type="button" role="menuitem" popovertarget="breadcrumb-dropdown-fe80" popovertargetaction="hide" aria-label="Close menu" class="midwest-button variant-default size-default theme-primary midwest-dropdown-close" name="button"> <span class="midwest-button-content"> <div class="midwest-icon text-2xl"> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Close"><title>Close</title> <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg> </div> </div> </span> <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none"> <div class="midwest-loading-icon-inner"> <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true"> <circle cx="15" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="60" cy="15" r="9" fill-opacity="0.3"> <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="105" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> </svg> </div> </div> </button> <label class="midwest-label " for=""> <a class="midwest-dropdown-item as-link" role="menuitem" href="/articles"> Articles </a> </label> <label class="midwest-label " for=""> <a class="midwest-dropdown-item as-link" role="menuitem" href="/guides"> Guides </a> </label> <label class="midwest-label " for=""> <a class="midwest-dropdown-item as-link" role="menuitem" href="/tutorials"> Tutorials </a> </label> </ul> <button class="midwest-breadcrumb has-dropdown variant-default" popovertarget="breadcrumb-dropdown-fe80" style="anchor-name: --breadcrumb-dropdown-fe80;" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="breadcrumb-dropdown-fe80"> <span class="midwest-label "> Section </span> <span class="breadcrumb-dropdown-indicator" aria-hidden="true"> <div class="midwest-icon "> <div class="midwest-icon-inner"> <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Chevron down"><title>Chevron down</title> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M112 184l144 144 144-144"></path></svg> </div> </div> </span> </button> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char">/</span> </li> <li class="breadcrumb-item"> <span class="midwest-breadcrumb variant-default current" aria-current="page"> <span class="midwest-label "> Articles </span> </span> </li> </ol></nav>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav aria-label="Breadcrumb" class="midwest-breadcrumbs style-inline"> <ol class="breadcrumbs-list"> <li class="breadcrumb-item"> <%= midwest_breadcrumb(title: 'Home', path: '/') %> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char">/</span> </li> <li class="breadcrumb-item"> <%= midwest_breadcrumb_dropdown(title: 'Section') do |c| %> <% c.with_item(label: 'Articles', path: '/articles') %> <% c.with_item(label: 'Guides', path: '/guides') %> <% c.with_item(label: 'Tutorials', path: '/tutorials') %> <% end %> </li> <li class="breadcrumb-separator" aria-hidden="true"> <span class="sep-char">/</span> </li> <li class="breadcrumb-item"> <%= midwest_breadcrumb(title: 'Articles', current: true) %> </li> </ol></nav>In a trail
Use alongside regular breadcrumbs to represent a branching point in the navigation hierarchy.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Breadcrumb Dropdown/in_trail
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."