Midwest Component Library v0.24.0

Previews

No matching results.

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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<div class="flex flex-col gap-6">
  <div class="flex flex-col gap-2">
    <div data-controller="midwest-prose" class="midwest-prose prose">
      <p>Default</p>
    </div>
    <div class="flex items-center gap-6">
      <a class="midwest-breadcrumb variant-default" href="/articles">
        <span class="midwest-label ">
          Link crumb
        </span>
      </a>
      <span class="midwest-breadcrumb variant-default current" aria-current="page">
        <span class="midwest-label ">
          Current crumb
        </span>
      </span>
      <a class="midwest-breadcrumb variant-default has-icon" href="/articles">
        <div class="midwest-icon " aria-hidden="true">
          <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="Warning"><title>Warning</title>
              <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
          </div>
        </div>
        <span class="midwest-label ">
          With icon
        </span>
      </a>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <div data-controller="midwest-prose" class="midwest-prose prose">
      <p>Underline</p>
    </div>
    <div class="flex items-center gap-6">
      <a class="midwest-breadcrumb variant-underline" href="/articles">
        <span class="midwest-label ">
          Link crumb
        </span>
      </a>
      <span class="midwest-breadcrumb variant-underline current" aria-current="page">
        <span class="midwest-label ">
          Current crumb
        </span>
      </span>
      <a class="midwest-breadcrumb variant-underline has-icon" href="/articles">
        <div class="midwest-icon " aria-hidden="true">
          <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="Warning"><title>Warning</title>
              <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
          </div>
        </div>
        <span class="midwest-label ">
          With icon
        </span>
      </a>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <div data-controller="midwest-prose" class="midwest-prose prose">
      <p>Muted</p>
    </div>
    <div class="flex items-center gap-6">
      <a class="midwest-breadcrumb variant-muted" href="/articles">
        <span class="midwest-label ">
          Link crumb
        </span>
      </a>
      <span class="midwest-breadcrumb variant-muted current" aria-current="page">
        <span class="midwest-label ">
          Current crumb
        </span>
      </span>
      <a class="midwest-breadcrumb variant-muted has-icon" href="/articles">
        <div class="midwest-icon " aria-hidden="true">
          <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="Warning"><title>Warning</title>
              <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
          </div>
        </div>
        <span class="midwest-label ">
          With icon
        </span>
      </a>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <div data-controller="midwest-prose" class="midwest-prose prose">
      <p>Pill</p>
    </div>
    <div class="flex items-center gap-6">
      <a class="midwest-breadcrumb variant-pill" href="/articles">
        <span class="midwest-label ">
          Link crumb
        </span>
      </a>
      <span class="midwest-breadcrumb variant-pill current" aria-current="page">
        <span class="midwest-label ">
          Current crumb
        </span>
      </span>
      <a class="midwest-breadcrumb variant-pill has-icon" href="/articles">
        <div class="midwest-icon " aria-hidden="true">
          <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="Warning"><title>Warning</title>
              <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
          </div>
        </div>
        <span class="midwest-label ">
          With icon
        </span>
      </a>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <div data-controller="midwest-prose" class="midwest-prose prose">
      <p>Bold</p>
    </div>
    <div class="flex items-center gap-6">
      <a class="midwest-breadcrumb variant-bold" href="/articles">
        <span class="midwest-label ">
          Link crumb
        </span>
      </a>
      <span class="midwest-breadcrumb variant-bold current" aria-current="page">
        <span class="midwest-label ">
          Current crumb
        </span>
      </span>
      <a class="midwest-breadcrumb variant-bold has-icon" href="/articles">
        <div class="midwest-icon " aria-hidden="true">
          <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="Warning"><title>Warning</title>
              <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
          </div>
        </div>
        <span class="midwest-label ">
          With icon
        </span>
      </a>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<div class="flex flex-col gap-6">
  <% Midwest::BreadcrumbComponent::VARIANT_OPTIONS.each do |variant| %>
    <div class="flex flex-col gap-2">
      <%= midwest_prose { tag.p variant.to_s.humanize } %>
      <div class="flex items-center gap-6">
        <%= midwest_breadcrumb(title: 'Link crumb', path: '/articles', variant: variant) %>
        <%= midwest_breadcrumb(title: 'Current crumb', current: true, variant: variant) %>
        <%= midwest_breadcrumb(title: 'With icon', path: '/articles', variant: variant, icon: :warning) %>
      </div>
    </div>
  <% end %>
</div>

Variants

Five visual variants are available. Each can also carry an optional icon, shown here on the linked (non-current) crumb.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Breadcrumb/variants

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."