# A–Z Index > A bar of letters over a grouped list: a click glides to the group, an ink pill follows the letter you read, empty letters stay dimmed. Sticks to the top. Navigation · index, alphabet, glossary, directory, jump, scroll, nav · HTML, CSS, vanilla JS · no dependencies · updated 2026-11-04 Demo: https://kodza.dev/components/a-z-index/ Source on GitHub: https://github.com/kodza-dev/kodza/tree/main/components/a-z-index Takes the whole screen (or reacts to the page scroll): give it a page, not a small box. ## Files The code below, served as files: byte for byte what the Kodza site copies (the CSS includes its theme guard). - [`kodza-a-z-index.css`](https://kodza.dev/registry/a-z-index/kodza-a-z-index.css) · 15.0 KB - [`kodza-a-z-index.js`](https://kodza.dev/registry/a-z-index/kodza-a-z-index.js) · 14.4 KB - [`kodza-a-z-index.html`](https://kodza.dev/registry/a-z-index/kodza-a-z-index.html) · 10.9 KB · the markup, to adapt and paste into your page **Can you run shell commands? Download the CSS and the JS, don't retype them.** Retyping costs thousands of tokens and can drop or change lines of the CSS. Put the files where your stack expects them (Use it says where: change the `-o` paths): ```bash curl -fsSL --create-dirs -o kodza/kodza-a-z-index.css https://kodza.dev/registry/a-z-index/kodza-a-z-index.css curl -fsSL --create-dirs -o kodza/kodza-a-z-index.js https://kodza.dev/registry/a-z-index/kodza-a-z-index.js ``` Then load the files from your page as Use it shows, instead of pasting the content. The HTML is the part you adapt (text, links, modifiers): paste it from the Code section. Copy the CSS and the JS from the Code section only if you can't run commands, exactly as they are. (Windows PowerShell: `curl.exe`.) ## API - Root: `[data-kodza-a-z-index]` - Variables (set them on the root element itself: it declares its own defaults): - `--kz-az-index-fg: #0a0a0a` - `--kz-az-index-muted: rgba(10, 10, 10, 0.62)` - `--kz-az-index-faint: rgba(10, 10, 10, 0.34)` — letters with nothing under them - `--kz-az-index-line: rgba(10, 10, 10, 0.1)` - `--kz-az-index-hover: rgba(10, 10, 10, 0.06)` - `--kz-az-index-ink: #0a0a0a` - `--kz-az-index-on-ink: #ffffff` - `--kz-az-index-veil: rgba(255, 255, 255, 0.78)` — behind the bar once it sticks - `--kz-az-index-top: 0px` — height of a fixed header above it - `--kz-az-index-bleed: 0px` — how far the veil reaches past the sides - `--kz-az-index-aside: 160px` — the column of a group's letter, on wide layouts - `--kz-az-index-duration: 0.5s` - `--kz-az-index-ease: cubic-bezier(0.22, 1, 0.36, 1)` - Attributes: - `data-key` - `data-kodza-a-z-index` - `data-label` - `data-letters` - `data-nav-label` - Lifecycle: `kodza:init` / `kodza:destroy` on `document`, with `{ detail: { root } }` to target a container. ## Dark mode The values Kodza uses on a dark background (`#0a0a0a`). For a page that follows the system theme, add them after the component's CSS: ```css @media (prefers-color-scheme: dark) { .kodza-az-index { --kz-az-index-fg: #f2f2f0; --kz-az-index-muted: rgba(242, 242, 240, 0.62); --kz-az-index-faint: rgba(242, 242, 240, 0.34); --kz-az-index-line: rgba(255, 255, 255, 0.12); --kz-az-index-hover: rgba(255, 255, 255, 0.08); --kz-az-index-ink: #f2f2f0; --kz-az-index-on-ink: #0a0a0a; --kz-az-index-veil: rgba(10, 10, 10, 0.82); } } ``` A site with its own theme switch puts the same rules under its dark selector instead (`[data-theme="dark"] .kodza-az-index { … }`); a single dark section, under that section's class. ## Use it ### Plain HTML page - CSS: `kodza/kodza-a-z-index.css` next to the page (the Files commands as they are), linked in ``: ``. Without a shell, paste it in a `