Pagination

Provides an easy way to navigate through multiple pages of content. It helps users move between paginated data efficiently while maintaining a clean and structured UI.

About

This component generates a navigation bar with page numbers, previous and next buttons, and optional first and last page controls. It is designed to be flexible, allowing customization of appearance, behavior, and accessibility features to fit different use cases. Whether handling large datasets, blog posts, or product listings, the Pagination Nav ensures smooth and intuitive navigation.

Example

The Pagination component accepts a data prop, which is an array of objects. Each object represents a page link with a url and an optional active property to indicate the current page.

Below is a simple example of how to use the Pagination component with static data:

1 2 3 4
Svelte 
<script>
  let data = [
    { url: "/page/1" },
    { url: "/page/2", active: true },  // Current page
    { url: "/page/3" },
    { url: "/page/4" }
  ];
</script>

<Pagination {data} />

Alignment

The align prop controls the horizontal position of the pagination. The accepted values are: 'start', 'center', and 'end'. The default value is center.

1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} align="start" />
<Pagination {data} align="center" />
<Pagination {data} align="end" />

Sizing

You can control the button size of the pagination with the size prop. Available values are: 'xs', 'sm', 'md', 'lg', 'xl', 'auto'. Default value md.

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} size="xs" />
<Pagination {data} size="sm" />
<Pagination {data} size="md" />
<Pagination {data} size="lg" />
<Pagination {data} size="xl" />

Flat Pagination

Add flat attribute to the Pagination component to make the pagination flat/border-less.

1 2 3 4
Svelte 
<Pagination {data} flat />

Prev/Next Button

You can use the hidePrevious, hideNext, and hidePreviousNext attributes to control the visibility of navigation buttons in the Pagination component. The hidePrevious hides the previous button, hideNext hides the next button, and hidePreviousNext hides both.

Hide Prev/Next Button

The example below demonstrates how to hide the previous button, next button, or both using attributes. The first example hides the previous button, the second hides the next button, and the third hides both.

1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} hidePrevious />
<Pagination {data} hideNext />
<Pagination {data} hidePreviousNext />

Custom Previous/Next Button Content

The previousButton and nextButton props allow you to customize the content of the previous and next buttons in the Pagination component. These props accept both plain text and HTML, giving you flexibility in styling and design.

By default, previousButton is set to "← Prev", and nextButton is set to "Next →". You can modify these values to fit your needs, such as changing the text or adding icons.

1 2 3 4
Svelte 
<Pagination {data} previousButton="&lsaquo;" nextButton="&rsaquo;" />

Onclick Function

In some cases, you may need custom functionality when clicking the previous or next button. You can achieve this using the onPreviousClick and onNextClick props by passing your custom functions to them.

1 2 3 4
Svelte 
<script>
  let prevFunction = () => {
    alert("Hello from previous function!")
  }

  let nextFunction = () => {
    alert("Hello from next function!")
  }
</script>

<Pagination {data} onPreviousClick={prevFunction} onNextClick={nextFunction} />

Hide Page Number Buttons

In some cases, you may only need the previous and next buttons without page numbers. The Pagination component supports this by default - simply leave the data prop empty, and it will display only the previous and next buttons.

Svelte 
<Pagination />

Rounded Corner

The rounded prop in the Pagination component allows you to easily control the border radius, ensuring consistent design throughout the application. This prop supports several predefined values, providing flexibility while maintaining a uniform look. Available values are: none, sm, md, lg, xl, and full. Default value md.

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} rounded="none" />
<Pagination {data} rounded="sm" />
<Pagination {data} rounded="md" />
<Pagination {data} rounded="lg" />
<Pagination {data} rounded="xl" />
<Pagination {data} rounded="full" />

Animation Speed

The animate prop controls the animation (hover animation in this case) speed of Pagination. Options include 'none' for no animation, 'slower' or slow for a gradual effect, normal (default) for standard speed, and fast or faster for quicker animations.

1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
1 2 3 4
Svelte 
<Pagination {data} animate="slower" />
<Pagination {data} animate="slow" />
<Pagination {data} animate="normal" />
<Pagination {data} animate="fast" />
<Pagination {data} animate="faster" />
<Pagination {data} animate="none" />

Accessibility

The Pagination component is designed with accessibility in mind, ensuring easy navigation for all users, including those using screen readers or keyboard navigation.

  • Keyboard Navigation: Users can navigate through pagination using the tab key to move focus and Enter or Space to activate a button.
  • ARIA Labels: The component includes appropriate aria-label attributes for previous, next, and page buttons, improving screen reader support.
  • Focus Indicators: Clear focus styles ensure visibility when navigating with a keyboard.
  • Semantic HTML: Uses proper HTML elements (button, a, nav, and ul/li) to enhance usability and compatibility with assistive technologies.

These features help make the Pagination component more accessible and user-friendly.

Configuration