Pagination Component

What it does

Styles the pagination markup Joomla emits on category blog pages (e.g. /index.php/fohlen). The component does not add classes to the markup — it targets Joomla's selectors directly (.com-content-category-blog__navigation, .pagination, .page-item, .page-link) so no PHP override is needed.

Key features

Horizontal flex layout with token-driven gap, sizing and colors
Active page rendered with a soft Killarney tint background + brand-green text
Disabled arrows (« ‹ on page 1, › » on the last page) rendered in muted neutral grey, non-interactive
Hover/focus state uses the shared --text-interactive-* token pattern, with visible focus outline for keyboard nav
Icon arrows reuse the existing FontAwesome bridge (.icon-angle-left, .icon-angle-right, .icon-angle-double-left, .icon-angle-double-right) — no extra icon assets needed
Counter line ("Seite X von Y") sits on the same row as the pagination at md+, stacks above on mobile

How to use


<div class="com-content-category-blog__navigation w-100">
  <p class="com-content-category-blog__counter counter float-md-end pt-3 pe-2">
    Seite 1 von 4
  </p>
  <div class="com-content-category-blog__pagination">
    <nav class="pagination__wrapper" aria-label="Seitennummerierung">
      <ul class="pagination ms-0 mb-4">
        <li class="disabled page-item">
          <span class="page-link" aria-hidden="true"><span class="icon-angle-double-left" aria-hidden="true"></span>
          </span>
        </li>
        <li class="disabled page-item">
          <span class="page-link" aria-hidden="true"><span class="icon-angle-left" aria-hidden="true"></span>
          </span>
        </li>
        <li class="active page-item">
          <a aria-current="true" aria-label="Seite 1" href="#" class="page-link">1
          </a>
        </li>
        <li class="page-item">
          <a aria-label="Gehe zur Seite 2" href="/index.php/fohlen?start=24" class="page-link">2
          </a>
        </li>
        <li class="page-item">
          <a aria-label="Gehe zur Seite 3" href="/index.php/fohlen?start=48" class="page-link">3
          </a>
        </li>
        <li class="page-item">
          <a aria-label="Gehe zur Seite 4" href="/index.php/fohlen?start=72" class="page-link">4
          </a>
        </li>
        <li class="page-item">
          <a aria-label="Gehe zur Seite ›" href="/index.php/fohlen?start=24" class="page-link"><span class="icon-angle-right" aria-hidden="true"></span>
          </a>
        </li>
        <li class="page-item">
          <a aria-label="Gehe zur Seite »" href="/index.php/fohlen?start=72" class="page-link"><span class="icon-angle-double-right" aria-hidden="true"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

The component is intended primarily as a styled preview of the Joomla output — the real markup is rendered by com_content's pagination layout, which this SCSS targets unchanged.

Params reference

Param	Type	Description
`ariaLabel`	`string`	`aria-label` on the `<nav>` — defaults to `Seitennummerierung`
`counter`	`string`	"Seite X von Y" line above/beside the list (omit to hide)
`pages`	`array`	Page items
`pages[].label`	`string`	Visible text (number or arrow glyph used as fallback when `icon` is absent)
`pages[].url`	`string`	Link target
`pages[].icon`	`string`	Icon suffix — e.g. `angle-left` → renders `<span class="icon-angle-left">`
`pages[].active`	`boolean`	Marks the current page
`pages[].disabled`	`boolean`	Renders a `<span>` instead of `<a>` and applies the disabled style
`pages[].ariaLabel`	`string`	Optional override for the link's `aria-label`

CSS class reference (Joomla markup, not added by us)

Class	Element
`.com-content-category-blog__navigation`	Outer wrapper — flex row at `md+`, column below
`.com-content-category-blog__counter`	"Seite X von Y" line
`.com-content-category-blog__pagination`	Wrapper around the `<nav>`
`.pagination__wrapper`	`<nav>` element
`.pagination`	`<ul>` — flex container for items
`.page-item`	`<li>`
`.page-item.active`	Current page
`.page-item.disabled`	Inert arrow
`.page-link`	`<a>` (or `<span>` when disabled)

Theming

Override at the .pagination element via CSS custom properties:

.pagination {
  --pagination-font-size: var(--body-fs);
  --pagination-gap: var(--spacing-050);
  --pagination-size: var(--spacing-250);            /* min square size */
  --pagination-padding: var(--spacing-075);
  --pagination-text-color: var(--text-interactive);
  --pagination-text-hover-color: var(--text-interactive-hover);
  --pagination-background-color: transparent;
  --pagination-background-hover-color: var(--text-interactive-hover-bg);
  --pagination-active-background-color: var(--color-primary-50);
  --pagination-active-text-color: var(--text-interactive);
  --pagination-disabled-color: var(--color-neutral-500);
  --pagination-counter-font-size: var(--font-size-300);
}

All values come from the generated component token file (scss/tokens/components/_pagination.scss).

SCSS partials

src/media/templates/site/jcrafts/scss/components/_pagination.scss — component styles
src/media/templates/site/jcrafts/scss/tokens/components/_pagination.scss — autogenerated tokens (do not edit)
Source tokens: design-system/src/assets/tokens/components/pagination.tokens

HTML Code (Demo)

<div class="com-content-category-blog__navigation w-100">
  <p class="com-content-category-blog__counter counter float-md-end pt-3 pe-2">
  Page 1 of 4</p>
  <div class="com-content-category-blog__pagination">
    <nav class="pagination__wrapper" aria-label="Pagination">
      <ul class="pagination ms-0 mb-4">
        <li class="disabled page-item">
          <span class="page-link" aria-hidden="true"><span class="icon-angle-double-left" aria-hidden="true"></span>
          </span>
        </li>
        <li class="disabled page-item">
          <span class="page-link" aria-hidden="true"><span class="icon-angle-left" aria-hidden="true"></span>
          </span>
        </li>
        <li class="active page-item">
          <a aria-current="true" aria-label="Page 1" href="#page-1" class="page-link">1</a>
        </li>
        <li class="page-item">
          <a aria-label="Go to page 2" href="#page-2" class="page-link">2</a>
        </li>
        <li class="page-item">
          <a aria-label="Go to page 3" href="#page-3" class="page-link">3</a>
        </li>
        <li class="page-item">
          <a aria-label="Go to page 4" href="#page-4" class="page-link">4</a>
        </li>
        <li class="page-item">
          <a aria-label="Go to next page" href="#" class="page-link"><span class="icon-angle-right" aria-hidden="true"></span>
          </a>
        </li>
        <li class="page-item">
          <a aria-label="Go to last page" href="#" class="page-link"><span class="icon-angle-double-right" aria-hidden="true"></span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

Configuration

Component Config: Navigation/pagination/pagination.config.js

{
  "ariaLabel": "Pagination",
  "counter": "Page 1 of 4",
  "pages": [
    {
      "label": "«",
      "icon": "angle-double-left",
      "ariaLabel": "Go to first page",
      "url": "#",
      "disabled": true
    },
    {
      "label": "‹",
      "icon": "angle-left",
      "ariaLabel": "Go to previous page",
      "url": "#",
      "disabled": true
    },
    {
      "label": "1",
      "url": "#page-1",
      "active": true,
      "ariaLabel": "Page 1"
    },
    {
      "label": "2",
      "url": "#page-2",
      "active": false,
      "ariaLabel": "Go to page 2"
    },
    {
      "label": "3",
      "url": "#page-3",
      "active": false,
      "ariaLabel": "Go to page 3"
    },
    {
      "label": "4",
      "url": "#page-4",
      "active": false,
      "ariaLabel": "Go to page 4"
    },
    {
      "label": "›",
      "icon": "angle-right",
      "ariaLabel": "Go to next page",
      "url": "#",
      "disabled": false
    },
    {
      "label": "»",
      "icon": "angle-double-right",
      "ariaLabel": "Go to last page",
      "url": "#",
      "disabled": false
    }
  ]
}