Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<button data-action="click->nav#back" class="midwest-breadcrumb variant-default has-icon" type="button">
  <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="Arrow back"><title>Arrow back</title>
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M244 400L100 256l144-144M120 256h292"></path></svg>
    </div>
  </div>
  <span class="midwest-label ">
    Back
  </span>
</button>
1
<%= midwest_breadcrumb(title: 'Back', as: :button, icon: :"arrow-back", data: { action: 'click->nav#back' }) %>

Button

Use as: :button to render the crumb as a <button> instead of a link. Useful for breadcrumbs that trigger JavaScript actions like opening a dialog, navigating in a SPA, or controlling Stimulus targets.

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/button

Annotate a preview to embed its Figma design here:

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