Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav class="breadcrumb" aria-label="Breadcrumb">
  <a href="#">Home</a>
  <span class="icon icon--dot" aria-hidden="true"></span>
  <button type="button" class="btn btn--plain font-normal" style="--btn-color: var(--color-text-subtle)" popovertarget="breadcrumb_dropdown" aria-haspopup="true">
    Components
    <span class="icon icon--chevron-down" aria-hidden="true"></span>
  </button>
  <span class="icon icon--dot" aria-hidden="true"></span>
  <span class="text-primary" aria-disabled="true" aria-current="page" role="link">Breadcrumb</span>
</nav>
<div popover id="breadcrumb_dropdown" class="popover popover--block-end-start" role="menu" aria-label="Components">
  <div class="menu" data-controller="menu">
    <div class="menu__group" role="group">
      <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#">Documentation</a>
      <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#">Themes</a>
      <a class="btn menu__item" data-menu-target="item" role="menuitem" href="#">GitHub</a>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<nav class="breadcrumb" aria-label="Breadcrumb">
  <%= link_to "Home", "#" %>
  <span class="icon icon--dot" aria-hidden="true"></span>
  <button type="button" class="btn btn--plain font-normal" style="--btn-color: var(--color-text-subtle)" popovertarget="breadcrumb_dropdown" aria-haspopup="true">
    Components
    <span class="icon icon--chevron-down" aria-hidden="true"></span>
  </button>
  <span class="icon icon--dot" aria-hidden="true"></span>
  <span class="text-primary" aria-disabled="true" aria-current="page" role="link">Breadcrumb</span>
</nav>
<div popover id="breadcrumb_dropdown" class="popover popover--block-end-start" role="menu" aria-label="Components">
  <div class="menu" data-controller="menu">
    <div class="menu__group" role="group">
      <%= link_to "Documentation", "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %>
      <%= link_to "Themes", "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %>
      <%= link_to "GitHub", "#", class: "btn menu__item", data: { menu_target: "item" }, role: "menuitem" %>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
:where(.breadcrumb) {
  align-items: center;
  column-gap: var(--size-1);
  color: var(--color-text-subtle);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  overflow-wrap: break-word;
  a:hover {
    color: var(--color-text);
  }
  @media (width >= 40rem) {
    column-gap: var(--size-2);
  }
}
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
import { Controller } from "@hotwired/stimulus"
import { rovingIndex } from "https://esm.sh/roving-ux@1.0.5?standalone"
export default class extends Controller {
  static targets = [ "item" ]
  #observer
  initialize() {
    this.#observer = new IntersectionObserver(this.#reset.bind(this))
  }
  connect() {
    this.#observer.observe(this.element)
  }
  disconnect() {
    this.#observer.disconnect()
  }
  #reset([ entry ]) {
    entry.isIntersecting && this.#start()
  }
  #start() {
    this.#rovingIndex()
    this.#focus()
  }
  #rovingIndex() {
    rovingIndex({ element: this.element, target: "[data-menu-target='item']" })
  }
  #focus() {
    this.itemTargets[0].focus()
  }
}

No notes provided.