x
1
2
3
4
5
6
7
8
9
10
11
<div class="flex flex-col gap-4"> <p class="text-gray-3">Press <kbd class="midwest-kbd">Tab</kbd> to reveal the skip link.</p> <a class="midwest-skip-link" href="#preview-nav"> Skip to navigation </a> <nav id="preview-nav" tabindex="-1" class="flex gap-3 rounded-2xl border border-gray-1 p-6"> <a href="#" class="underline">Home</a> <a href="#" class="underline">Products</a> <a href="#" class="underline">About</a> </nav></div>1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="flex flex-col gap-4"> <p class="text-gray-3">Press <kbd class="midwest-kbd">Tab</kbd> to reveal the skip link.</p> <%= midwest_skip_link(href: "#preview-nav") do %> Skip to navigation <% end %> <nav id="preview-nav" tabindex="-1" class="flex gap-3 rounded-2xl border border-gray-1 p-6"> <a href="#" class="underline">Home</a> <a href="#" class="underline">Products</a> <a href="#" class="underline">About</a> </nav></div>Custom Label
The link text comes from the block; pass any target id via href:.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Skip Link/custom_label
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."