# A–Z Index Styles (SCSS)

> Styles the [az_index] letter bar as a row of buttons that stays visible while scrolling, and lays out each letter's entries in columns.

- Type: SCSS
- Runs: Site-wide header
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: scss, glossary, styling
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/az-index-scss/

## Code

```scss
$sticky-top: 0;
$chip-bg: color-mix(in srgb, currentColor 8%, transparent);

.az-index-nav {
    position: sticky;
    top: $sticky-top;
    z-index: 5;
    padding: 0.5rem 0;
    background: var(--wp--preset--color--base, Canvas);

    a {
        min-width: 2rem;
        border-radius: 4px;
        background: $chip-bg;
        text-align: center;
        text-decoration: none;
    }
}

.az-index {
    section {
        scroll-margin-top: 4rem;
    }

    ul {
        columns: 3 12rem;
        padding-left: 1.2em;
    }
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
```

## Notes

Set $sticky-top to the height of a fixed header if your theme has one.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "A–Z Index Styles (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/