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
<nav class="midwest-breadcrumbs style-inline" aria-label="Breadcrumb">
  <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" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb-item">
      <a class="midwest-breadcrumb variant-default" href="/articles">
        <span class="midwest-label ">
          Articles
        </span>
      </a>
    </li>
    <li class="breadcrumb-separator" aria-hidden="true">
      <span class="sep-char" aria-hidden="true">/</span>
    </li>
    <li class="breadcrumb-item">
      <span class="midwest-breadcrumb variant-default current" aria-current="page">
        <span class="midwest-label ">
          Getting Started
        </span>
      </span>
    </li>
  </ol>
</nav>
1
2
3
4
5
6
7
8
9
10
<% separator_val = params[:separator].presence&.to_sym %>
<%= midwest_breadcrumbs(
  { title: 'Home', path: '/' },
  { title: 'Articles', path: '/articles' },
  { title: 'Getting Started', path: '/articles/getting-started' },
  style: (params[:style] || 'inline').to_sym,
  variant: (params[:variant] || 'default').to_sym,
  separator: separator_val
) %>

Playground

Adjust the options live to explore the full range of the component.

Param Description Input

Container appearance

Visual style of each crumb

Optional separator icon (blank = slash)

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

Accessibility

Figma embed for Breadcrumbs/playground

Annotate a preview to embed its Figma design here:

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