Pagination

A pagination component is like a digital bookmark, helping users navigate through a sea of content without getting lost. It's a handy tool that breaks down information into bite-sized chunks, making it easier to digest and explore. With a pagination component, users can easily find what they're looking for, without feeling overwhelmed by a barrage of text.

Default pagination

<nav class="pagination" aria-label="Pagination"
     style="--xii-pagination-grid-template-columns: 1fr 1fr">
    <div class="left">
        <p>Showing 1 to 10 of 97 results</p>
    </div>
    <div class="right">
        <div class="btn-group separated" role="group" aria-label="Basic example">
            <button type="button" class="btn">Left</button>
            <button type="button" class="btn">Middle</button>
            <button type="button" class="btn">Right</button>
        </div>
    </div>
</nav>

@use '~/styles/app.scss' as app;

$button: app.get-theme(app.$theme, 'components.button');

@include app.generate-component(
    $button,
    'btn',
    app.$config,
    app.$theme
);

$button_group: app.get-theme(app.$theme, 'components.button-group');

@include app.generate-component(
    $button_group,
    'btn-group',
    app.$config,
    app.$theme
);

$pagination: app.get-theme(app.$theme, 'components.pagination');

@include app.generate-component(
    $pagination,
    'pagination',
    app.$config,
    app.$theme
);

Pagination centered

<nav class="pagination" aria-label="Pagination"
     style="--xii-pagination-grid-template-columns: 100px 1fr 100px">
    <div class="left">
        <button class="btn">Previous</button>
    </div>
    <div class="center">
        <div class="btn-group separated" role="group" aria-label="Basic example">
            <button type="button" class="btn">Left</button>
            <button type="button" class="btn">Middle</button>
            <button type="button" class="btn">Right</button>
        </div>
    </div>
    <div class="right">
        <button class="btn">Next</button>
    </div>
</nav>

@use '~/styles/app.scss' as app;

$button: app.get-theme(app.$theme, 'components.button');

@include app.generate-component(
  $button,
  'btn',
  app.$config,
  app.$theme
);

$button_group: app.get-theme(app.$theme, 'components.button-group');

@include app.generate-component(
  $button_group,
  'btn-group',
  app.$config,
  app.$theme
);

$pagination: app.get-theme(app.$theme, 'components.pagination');

@include app.generate-component(
  $pagination,
  'pagination',
  app.$config,
  app.$theme
);

SVG icons

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li class="item">
            <a href="#" class="link">
                <svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
                    <g>
                        <path
                            d="m9.979802,16a0.997,0.997 0 0 1 -0.707,-0.293l-5,-5a0.999,0.999 0 0 1 0,-1.414l5,-5a0.999,0.999 0 1 1 1.414,1.414l-4.293,4.293l4.293,4.293a0.999,0.999 0 0 1 -0.707,1.707z"></path>
                        <path
                            d="m14.681362,16a0.997,0.997 0 0 1 -0.707,-0.293l-5,-5a0.999,0.999 0 0 1 0,-1.414l5,-5a0.999,0.999 0 1 1 1.414,1.414l-4.293,4.293l4.293,4.293a0.999,0.999 0 0 1 -0.707,1.707z"></path>
                    </g>
                </svg>
            </a>
        </li>
        <li class="item">
            <a href="#" class="link">
                <svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
                    <path
                        d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16z"></path>
                </svg>
            </a>
        </li>
        <li class="item">
            <a href="#" class="link">
                <svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
                    <path
                        d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16z"></path>
                </svg>
            </a>
        </li>
        <li class="item">
            <a href="#" class="link">
                <svg viewBox="0 0 20 20" focusable="false" aria-hidden="true" width="20" height="20">
                    <g>
                        <path
                            d="M9.7,4c0.3,0,0.5,0.1,0.7,0.3l5,5c0.4,0.4,0.4,1,0,1.4c0,0,0,0,0,0l-5,5c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4l4.3-4.3L9,5.7c-0.4-0.4-0.4-1,0-1.4C9.2,4.1,9.4,4,9.7,4z"></path>
                        <path
                            d="M5,4c0.3,0,0.5,0.1,0.7,0.3l5,5c0.4,0.4,0.4,1,0,1.4c0,0,0,0,0,0l-5,5c-0.4,0.4-1,0.4-1.4,0c-0.4-0.4-0.4-1,0-1.4L8.6,10L4.3,5.7c-0.4-0.4-0.4-1,0-1.4C4.5,4.1,4.7,4,5,4z"></path>
                    </g>
                </svg>
            </a>
        </li>
    </ul>
</nav>

@use '~/styles/app.scss' as app;

$button: app.get-theme(app.$theme, 'components.button');

@include app.generate-component(
  $button,
  'btn',
  app.$config,
  app.$theme
);

$button_group: app.get-theme(app.$theme, 'components.button-group');

@include app.generate-component(
  $button_group,
  'btn-group',
  app.$config,
  app.$theme
);

$pagination: app.get-theme(app.$theme, 'components.pagination');

@include app.generate-component(
  $pagination,
  'pagination',
  app.$config,
  app.$theme
);

Custom structure

<div class="flex align-items-center justify-content-between">
    <div>
        Showing 1 to 10 of 42 results
    </div>
    <div>
        <ul class="pagination">
            <li class="item">
                <a href="#" class="link">2</a>
            </li>
        </ul>
    </div>
</div>

@use '~/styles/app.scss' as app;

$pagination: app.get-theme(app.$theme, 'components.pagination');

@include app.generate-component(
  $pagination,
  'pagination',
  app.$config,
  app.$theme
);