diff --git a/docs/README.md b/docs/README.md
index 742b65f..32860cd 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -69,6 +69,13 @@ Modal dialog component for displaying content in an overlay.
 - Visibility controlled via Blazor state
 - No JavaScript interop required
 
+#### [Pagination](components/pagination.md)
+Pagination control for navigating large data sets across multiple pages.
+- Full and simple view modes
+- Ellipsis truncation via `PageRangeSize`
+- Optional jump-to-page input and total-items summary
+- Customizable previous/next buttons and alignment
+
 ### Form Components
 
 BitBlazor provides a comprehensive set of form components that integrate seamlessly with ASP.NET Core Blazor's form system and Bootstrap Italia styling.
diff --git a/docs/components/pagination.md b/docs/components/pagination.md
new file mode 100644
index 0000000..2b0b724
--- /dev/null
+++ b/docs/components/pagination.md
@@ -0,0 +1,360 @@
+# BitPagination
+
+The `BitPagination` component provides a [pagination control using Bootstrap Italia styles](https://italia.github.io/bootstrap-italia/docs/componenti/paginazione/).
+
+## Namespace
+
+```csharp
+BitBlazor.Components
+```
+
+## Description
+
+The Pagination component enables users to navigate through large data sets split across multiple pages. It renders previous/next buttons, individual page links with optional ellipsis truncation, and optional extras such as a jump-to-page input and a total-items summary. Two view modes are available: the default full control and a compact simple mode.
+
+`BitPagination` supports both **interactive** and **static SSR** render modes. In interactive mode, page changes are handled via two-way binding with `@bind-Page`. In SSR mode, supply a `PageLinkGenerator` to render real `<a href>` links that trigger full browser navigation — no JavaScript required.
+
+## Parameters
+
+| Name | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `NumberOfPages` | `int` | ✓ | `1` | Total number of pages in the data set. |
+| `Description` | `string` | ✓ | `""` | Text placed in the `aria-label` of the wrapping `<nav>` element. |
+| `Page` | `int` | ✗ | `1` | The currently selected page. Use `@bind-Page` for two-way binding. |
+| `PageChanged` | `EventCallback<int>` | ✗ | - | Callback invoked when the active page changes. Receives the new page number. |
+| `PageLinkGenerator` | `Func<int, string>?` | ✗ | `null` | When provided, each page button is rendered as a real `<a href>` pointing to the URL returned by this function for the given page number. Required for SSR compatibility. When `null`, page buttons use `href="#"` and rely on interactive C# event handlers. |
+| `PreviousPageLabel` | `string` | ✗ | `"previous page"` | Visually-hidden label for the previous-page button (screen readers). |
+| `PreviousPageTemplate` | `RenderFragment?` | ✗ | `null` | Custom content for the previous-page button. Replaces the default chevron icon. |
+| `NextPageLabel` | `string` | ✗ | `"next page"` | Visually-hidden label for the next-page button (screen readers). |
+| `NextPageTemplate` | `RenderFragment?` | ✗ | `null` | Custom content for the next-page button. Replaces the default chevron icon. |
+| `Alignment` | `PaginationAlignment` | ✗ | `Left` | Horizontal alignment of the pagination controls within their container. |
+| `Disabled` | `bool` | ✗ | `false` | Disables all interaction with the pagination controls. |
+| `PageRangeSize` | `int?` | ✗ | `null` | Number of page buttons to show on each side of the current page before inserting an ellipsis. When `null`, all pages are always shown. |
+| `TotalItemsTemplate` | `RenderFragment?` | ✗ | `null` | Custom content rendered below the page list to display a total-items summary. |
+| `ShowJumpToPage` | `bool` | ✗ | `false` | When `true`, renders a text input that lets users jump directly to a specific page. |
+| `JumpToPageLabelTemplate` | `RenderFragment?` | ✗ | `null` | Custom label for the jump-to-page input. Defaults to `"go to..."` with an accessible description. |
+| `ViewMode` | `PaginationViewMode` | ✗ | `Default` | Display mode for the pagination controls (see `PaginationViewMode`). |
+| `SimpleModeVisuallyHiddenTemplate` | `RenderFragment<PaginationState>?` | ✗ | `null` | Accessible content for Simple mode, provided to screen readers. Receives `PaginationState` as context. Defaults to `"page N of M"`. |
+
+## Enumerations
+
+### PaginationViewMode
+
+| Value | Description |
+|-------|-------------|
+| `Default` | Full pagination control: previous button, all page buttons (with optional ellipsis), next button. |
+| `Simple` | Compact control showing only the current page and total pages (e.g. `3 / 10`), plus a visually-hidden screen-reader link. |
+
+### PaginationAlignment
+
+| Value | CSS class added | Description |
+|-------|-----------------|-------------|
+| `Left` | *(none)* | Left-aligned (default). |
+| `Center` | `justify-content-center` | Centered horizontally. |
+| `Right` | `justify-content-end` | Right-aligned. |
+
+### PaginationState
+
+`PaginationState` is a `record struct` passed as context to `SimpleModeVisuallyHiddenTemplate`.
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `CurrentPage` | `int` | The currently active page number. |
+| `NumberOfPages` | `int` | Total number of pages. |
+| `IsFirstPage` | `bool` | `true` when the current page is `1`. |
+| `IsLastPage` | `bool` | `true` when the current page equals `NumberOfPages`. |
+
+## Usage Examples
+
+### Basic pagination
+
+```razor
+<BitPagination NumberOfPages="10"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               @bind-Page:after="HandlePageChanged" />
+
+@code {
+    private int currentPage = 1;
+
+    private async Task HandlePageChanged()
+    {
+        await LoadDataAsync(currentPage);
+    }
+}
+```
+
+### SSR pagination (Static Server-Side Rendering)
+
+Use `PageLinkGenerator` to make each page button a real `<a href>` link. This works without JavaScript and is required for components rendered with `@attribute [StreamRendering]` or in a fully static SSR context.
+
+The current page is typically encoded as a route parameter so the server can pre-render the correct page on load.
+
+```razor
+@page "/news"
+@page "/news/{Page:int}"
+@attribute [StreamRendering]
+
+@inject INewsService NewsService
+
+<BitPagination NumberOfPages="@totalPages"
+               Page="@currentPage"
+               PageLinkGenerator="@(page => $"/news/{page}")"
+               Description="Navigate news pages"
+               Alignment="PaginationAlignment.Center"
+               PageRangeSize="2" />
+
+@code {
+    [Parameter] public int Page { get; set; }
+
+    private int currentPage;
+    private int totalPages;
+
+    protected override async Task OnInitializedAsync()
+    {
+        currentPage = Page < 1 ? 1 : Page;
+        var result = await NewsService.GetNewsAsync(currentPage);
+        totalPages = (int)Math.Ceiling((double)result.TotalCount / 10);
+    }
+}
+```
+
+### Interactive mode with shareable URL
+
+Combine `PageLinkGenerator` with `@bind-Page` when you want both a C# callback (e.g. to update in-memory state without full navigation) and a real URL that can be bookmarked or shared. In interactive mode `@onclick:preventDefault` intercepts clicks so the C# handler runs; in SSR the browser follows the real `href`.
+
+```razor
+<BitPagination NumberOfPages="@totalPages"
+               @bind-Page="currentPage"
+               @bind-Page:after="LoadCurrentPage"
+               PageLinkGenerator="@(page => $"/products?page={page}")"
+               Description="Navigate products" />
+
+@code {
+    private int currentPage = 1;
+    private int totalPages = 10;
+
+    private async Task LoadCurrentPage()
+    {
+        await LoadDataAsync(currentPage);
+    }
+}
+```
+
+### Centered alignment
+
+```razor
+<BitPagination NumberOfPages="5"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               Alignment="PaginationAlignment.Center" />
+```
+
+### Simple mode
+
+```razor
+<BitPagination NumberOfPages="20"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               ViewMode="PaginationViewMode.Simple" />
+```
+
+### With ellipsis (PageRangeSize)
+
+When `PageRangeSize` is set, only the first page, the last page, the current page, and the specified number of neighbours are shown. Other page numbers are replaced with `...`.
+
+```razor
+<BitPagination NumberOfPages="50"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               PageRangeSize="2" />
+```
+
+### With jump-to-page input
+
+```razor
+<BitPagination NumberOfPages="20"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               ShowJumpToPage="true" />
+```
+
+### With custom jump-to-page label
+
+```razor
+<BitPagination NumberOfPages="20"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               ShowJumpToPage="true">
+    <JumpToPageLabelTemplate>
+        <span aria-hidden="true">Go to page</span>
+        <span class="visually-hidden">Enter page number to navigate to</span>
+    </JumpToPageLabelTemplate>
+</BitPagination>
+```
+
+### With total-items summary
+
+```razor
+<BitPagination NumberOfPages="10"
+               Description="Navigate pages"
+               @bind-Page="currentPage">
+    <TotalItemsTemplate>
+        Results @((currentPage - 1) * pageSize + 1)–@(currentPage * pageSize) of @totalItems
+    </TotalItemsTemplate>
+</BitPagination>
+
+@code {
+    private int currentPage = 1;
+    private int pageSize = 10;
+    private int totalItems = 100;
+}
+```
+
+### Disabled state
+
+```razor
+<BitPagination NumberOfPages="10"
+               Description="Navigate pages"
+               Page="3"
+               Disabled="true" />
+```
+
+### Custom previous/next page buttons
+
+```razor
+<BitPagination NumberOfPages="10"
+               Description="Navigate pages"
+               @bind-Page="currentPage">
+    <PreviousPageTemplate>
+        <span>&#8592; Prev</span>
+    </PreviousPageTemplate>
+    <NextPageTemplate>
+        <span>Next &#8594;</span>
+    </NextPageTemplate>
+</BitPagination>
+```
+
+### Custom Simple mode screen-reader content
+
+```razor
+<BitPagination NumberOfPages="20"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               ViewMode="PaginationViewMode.Simple">
+    <SimpleModeVisuallyHiddenTemplate Context="state">
+        Currently viewing page @state.CurrentPage of @state.NumberOfPages
+    </SimpleModeVisuallyHiddenTemplate>
+</BitPagination>
+```
+
+## Accessibility
+
+- The wrapping `<nav>` element always carries the `aria-label` set via the required `Description` parameter.
+- The active page item receives `aria-current="page"` automatically.
+- Disabled items receive `aria-hidden="true"` and `tabindex="-1"` so they are skipped by keyboard and screen-reader navigation. The previous-page and next-page buttons are disabled automatically when already on the first or last page respectively.
+- Previous and next page buttons include a `<span class="visually-hidden">` text sourced from `PreviousPageLabel` and `NextPageLabel` respectively.
+- In Simple mode, a visually hidden element provides the full page context (e.g. `"page 3 of 20"`) for screen readers. Customise it with `SimpleModeVisuallyHiddenTemplate`.
+- When `ShowJumpToPage` is `true`, the input and its label are properly associated via `id`/`for` attributes generated at runtime.
+
+## Generated CSS Classes
+
+| Element | CSS class | Condition |
+|---------|-----------|-----------|
+| `<nav>` | `pagination-wrapper` | Always |
+| `<nav>` | `justify-content-center` | `Alignment == Center` |
+| `<nav>` | `justify-content-end` | `Alignment == Right` |
+| `<nav>` | `pagination-total` | `TotalItemsTemplate` is not `null` |
+| `<ul>` | `pagination` | Always |
+| `<li>` | `page-item` | Always |
+| `<li>` | `disabled` | `Disabled == true`, or the previous-page button when on page 1, or the next-page button when on the last page |
+
+## Generated HTML Structure
+
+When `PageLinkGenerator` is **not** set (interactive mode), page buttons use `href="#"` and rely on Blazor event handlers:
+
+```html
+<nav class="pagination-wrapper" aria-label="Navigate pages">
+    <ul class="pagination">
+        <!-- Previous page button (disabled on page 1) -->
+        <li class="page-item disabled">
+            <a class="page-link" style="cursor: pointer;" tabindex="-1" aria-hidden="true">
+                <!-- chevron-left icon -->
+                <span class="visually-hidden">previous page</span>
+            </a>
+        </li>
+
+        <!-- Page items (Default mode) -->
+        <li class="page-item">
+            <a class="page-link" href="#" aria-current="page">1</a>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">2</a>
+        </li>
+        <!-- Ellipsis (when PageRangeSize is set and pages are truncated) -->
+        <li class="page-item">
+            <span class="page-link">...</span>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">10</a>
+        </li>
+
+        <!-- Next page button -->
+        <li class="page-item">
+            <a class="page-link" href="#" onclick="...">
+                <span class="visually-hidden">next page</span>
+                <!-- chevron-right icon -->
+            </a>
+        </li>
+    </ul>
+
+    <!-- Jump-to-page input (when ShowJumpToPage is true) -->
+    <div class="form-group">
+        <input type="text" class="form-control" inputmode="numeric" pattern="[0-9]*" />
+        <label for="jumpToPage-...">
+            <span aria-hidden="true">go to...</span>
+            <span class="visually-hidden">Set the destination page</span>
+        </label>
+    </div>
+
+    <!-- Total items summary (when TotalItemsTemplate is provided) -->
+    <p>Results 1–10 of 100</p>
+</nav>
+```
+
+When `PageLinkGenerator` is set, each `href` is populated with the URL returned by the generator. The previous/next buttons receive the adjacent page URL; disabled nav buttons (first page's prev, last page's next) keep `href="#"`:
+
+```html
+<!-- With PageLinkGenerator="@(page => $"/news/{page}")" on page 3 of 10 -->
+<li class="page-item">
+    <a class="page-link" href="/news/2"><!-- prev --></a>
+</li>
+<li class="page-item">
+    <a class="page-link" href="/news/1">1</a>
+</li>
+<li class="page-item">
+    <a class="page-link" href="/news/2">2</a>
+</li>
+<li class="page-item">
+    <a class="page-link" href="/news/3" aria-current="page">3</a>
+</li>
+...
+<li class="page-item">
+    <a class="page-link" href="/news/4"><!-- next --></a>
+</li>
+```
+
+## Notes
+
+- `NumberOfPages` and `Description` are both marked `[EditorRequired]`; omitting either will produce a build warning.
+- The `Page` parameter supports two-way binding via `@bind-Page`. Use `@bind-Page:after` to react to page changes (e.g. to reload data).
+- When `ShowJumpToPage` is `true` and the user enters a value outside the valid range (`< 1` or `> NumberOfPages`), the input is silently reset without triggering navigation.
+- `PageRangeSize` always preserves the first and last page buttons; only the middle pages are collapsed into ellipses.
+- **SSR compatibility**: In Blazor static SSR, `@onclick` C# callbacks never fire. Set `PageLinkGenerator` to produce real `<a href>` links — the component will then work purely via browser navigation with no JavaScript required.
+- **Progressive enhancement**: When both `PageLinkGenerator` and `@bind-Page` are set, the component uses `@onclick:preventDefault` to intercept clicks in interactive mode (running the C# handler) while still exposing a valid `href` for SSR and for right-click / open-in-new-tab scenarios.
+- **Disabled nav buttons**: The previous-page button on page 1 and the next-page button on the last page are automatically disabled — they receive the `disabled` CSS class on `<li>`, plus `aria-hidden="true"` and `tabindex="-1"` on the `<a>`, regardless of the `Disabled` parameter. When `PageLinkGenerator` is set, these boundary buttons render without an `href` since there is no valid target page to link to.
+
+## References
+
+- [Bootstrap Italia — Paginazione](https://italia.github.io/bootstrap-italia/docs/componenti/paginazione/)
+- [WAI-ARIA Authoring Practices — Pagination](https://www.w3.org/WAI/ARIA/apg/patterns/navigation/)
diff --git a/docs/enumerations.md b/docs/enumerations.md
index 0b1f637..aa8de36 100644
--- a/docs/enumerations.md
+++ b/docs/enumerations.md
@@ -267,6 +267,118 @@ Defines alignment options for icons.
 | `Middle` | Center alignment | `align-middle` |
 | `Top` | Top alignment | `align-top` |
 
+## Modal-specific Enumerations
+
+### ModalBackdrop
+
+**Namespace**: `BitBlazor.Components`
+
+Defines the backdrop behaviour of the `BitModal` component.
+
+| Value | Description |
+|-------|-------------|
+| `Default` | A backdrop is shown; clicking it closes the modal. |
+| `Static` | A backdrop is shown; clicking it does **not** close the modal. |
+| `None` | No backdrop is rendered. |
+
+**Components using ModalBackdrop**:
+- `BitModal`
+
+### ModalPosition
+
+**Namespace**: `BitBlazor.Components`
+
+Defines the positioning variant of the `BitModal` component.
+
+| Value | CSS effect | Description |
+|-------|------------|-------------|
+| `Default` | *(none)* | Top-center (Bootstrap Italia default). |
+| `Centered` | `modal-dialog-centered` on `.modal-dialog` | Vertically centered. |
+| `Left` | `modal-dialog-left` on `.modal-dialog` + `it-dialog-scrollable` on `.modal` | Full-height, left-aligned. |
+| `Right` | `modal-dialog-right` on `.modal-dialog` + `it-dialog-scrollable` on `.modal` | Full-height, right-aligned. |
+
+**Components using ModalPosition**:
+- `BitModal`
+
+### ModalSize
+
+**Namespace**: `BitBlazor.Components`
+
+Defines the size variant of the `BitModal` component.
+
+| Value | CSS class on `.modal-dialog` | Description |
+|-------|------------------------------|-------------|
+| `Default` | *(none)* | Standard size. |
+| `Small` | `modal-sm` | Small dialog. |
+| `Large` | `modal-lg` | Large dialog. |
+| `ExtraLarge` | `modal-xl` | Extra-large dialog. |
+
+**Components using ModalSize**:
+- `BitModal`
+
+### ModalType
+
+**Namespace**: `BitBlazor.Components`
+
+Defines the visual type variant of the `BitModal` component.
+
+| Value | CSS class on `.modal` | Description |
+|-------|----------------------|-------------|
+| `Default` | *(none)* | Standard modal. |
+| `Alert` | `alert-modal` | Alert modal, typically used with an icon in the header. |
+| `LinkList` | `it-dialog-link-list` | Optimised for rendering navigation link lists. |
+| `Popconfirm` | `popconfirm-modal` | Compact confirmation dialog. |
+
+**Components using ModalType**:
+- `BitModal`
+
+## Pagination-specific Enumerations
+
+### PaginationAlignment
+
+**Namespace**: `BitBlazor.Components`
+
+Specifies the horizontal alignment of the pagination controls within their container.
+
+| Value | CSS class added to `<nav>` | Description |
+|-------|---------------------------|-------------|
+| `Left` | *(none)* | Left-aligned (default). |
+| `Center` | `justify-content-center` | Centered horizontally. |
+| `Right` | `justify-content-end` | Right-aligned. |
+
+**Components using PaginationAlignment**:
+- `BitPagination`
+
+### PaginationViewMode
+
+**Namespace**: `BitBlazor.Components`
+
+Specifies the display mode for the `BitPagination` component.
+
+| Value | Description |
+|-------|-------------|
+| `Default` | Full pagination control: all page buttons with optional ellipsis, previous and next buttons. |
+| `Simple` | Compact control showing the current page and total pages (e.g. `3 / 10`) with an accessible hidden link. |
+
+**Components using PaginationViewMode**:
+- `BitPagination`
+
+### PaginationState
+
+**Namespace**: `BitBlazor.Components`
+
+`PaginationState` is a `record struct` (not an enum) that represents a snapshot of the pagination control's state. It is passed as context to `BitPagination.SimpleModeVisuallyHiddenTemplate`.
+
+| Member | Type | Description |
+|--------|------|-------------|
+| `CurrentPage` | `int` | The currently active page number. |
+| `NumberOfPages` | `int` | Total number of pages. |
+| `IsFirstPage` | `bool` | `true` when `CurrentPage == 1`. |
+| `IsLastPage` | `bool` | `true` when `CurrentPage == NumberOfPages`. |
+
+**Components using PaginationState**:
+- `BitPagination` (`SimpleModeVisuallyHiddenTemplate` context)
+
 ## Enumeration Mappings
 
 ### Color vs IconColor
diff --git a/docs/quick-reference.md b/docs/quick-reference.md
index 9dbe37c..69984ba 100644
--- a/docs/quick-reference.md
+++ b/docs/quick-reference.md
@@ -79,6 +79,37 @@ This guide provides a quick overview of all BitBlazor components with basic exam
 </BitCard>
 ```
 
+### Pagination
+```razor
+<!-- Basic pagination with two-way binding -->
+<BitPagination NumberOfPages="10"
+               Description="Navigate pages"
+               @bind-Page="currentPage" />
+
+<!-- Centered, with ellipsis -->
+<BitPagination NumberOfPages="50"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               Alignment="PaginationAlignment.Center"
+               PageRangeSize="2" />
+
+<!-- Simple mode -->
+<BitPagination NumberOfPages="20"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               ViewMode="PaginationViewMode.Simple" />
+
+<!-- With jump-to-page and total summary -->
+<BitPagination NumberOfPages="10"
+               Description="Navigate pages"
+               @bind-Page="currentPage"
+               ShowJumpToPage="true">
+    <TotalItemsTemplate>
+        Results @((currentPage - 1) * 10 + 1)–@(currentPage * 10) of 100
+    </TotalItemsTemplate>
+</BitPagination>
+```
+
 ## Form Components
 
 ### BitTextField
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/NavMenu.razor b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/NavMenu.razor
index 1adcbcc..6636a50 100644
--- a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/NavMenu.razor
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Layout/NavMenu.razor
@@ -26,6 +26,19 @@
                         <span>Modulistica</span>
                     </NavLink>
                 </li>
+                <li>
+                    <NavLink class="list-item medium" href="pratiche">
+                        <BitIcon IconName="@Icons.ItFolder" />
+                        <span>Pratiche</span>
+                        <BitBadge Text="42" BackgroundColor="Color.Primary" Rounded="true" CssClass="ms-auto" />
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink class="list-item medium" href="news">
+                        <BitIcon IconName="@Icons.ItHorn" />
+                        <span>Notizie</span>
+                    </NavLink>
+                </li>
                 <li>
                     <NavLink class="list-item medium" href="comunicazioni">
                         <BitIcon IconName="@Icons.ItMail" />
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/News.razor b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/News.razor
new file mode 100644
index 0000000..f97b751
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/News.razor
@@ -0,0 +1,91 @@
+@page "/news"
+@page "/news/{page:int}"
+@attribute [StreamRendering]
+
+@inject INewsService NewsService
+
+<PageTitle>Notizie — Comune di Bitopoli</PageTitle>
+
+<BitBreadcrumb Items="@breadcrumbItems" />
+
+<div class="mt-3 mb-4">
+    <h1 class="h3 fw-bold mb-1">Notizie e Comunicazioni</h1>
+    <p class="text-muted mb-0">
+        Rimani aggiornato su tutte le comunicazioni, avvisi e notizie del Comune di Bitopoli.
+    </p>
+</div>
+
+@if (newsResult is null)
+{
+    <p><em>Caricamento notizie in corso...</em></p>
+}
+else
+{
+    <div class="row g-3 mb-4">
+        @foreach (var item in newsResult.Items)
+        {
+            <div class="col-12 col-md-6 col-lg-4">
+                <BitCard Bordered="true" Shadow="CardShadow.Small" FullHeight="true">
+                    <CardBody>
+                        <div class="d-flex justify-content-between align-items-start mb-2">
+                            <CardTitle>@item.Title</CardTitle>
+                            <BitBadge Text="@item.Category"
+                                      BackgroundColor="@GetCategoryColor(item.Category)"
+                                      Rounded="true" />
+                        </div>
+                        <CardText>
+                            <p class="text-muted small">@item.Summary</p>
+                            <small class="text-muted">
+                                <BitIcon IconName="@Icons.ItClock" />
+                                @item.PublishedAt.ToString("dd/MM/yyyy")
+                            </small>
+                        </CardText>
+                        <CardFooter>
+                            <BitButton Color="Color.Primary" Variant="Variant.Outline" Size="Size.Small">
+                                Leggi di più
+                            </BitButton>
+                        </CardFooter>
+                    </CardBody>
+                </BitCard>
+            </div>
+        }
+    </div>
+
+    <BitPagination NumberOfPages="@totalPages"
+                   Page="@currentPage"
+                   PageLinkGenerator="@(p => $"/news/{p}")"
+                   Description="Navigazione notizie"
+                   Alignment="PaginationAlignment.Center"
+                   PageRangeSize="2" />
+}
+
+@code {
+    [Parameter]
+    public int Page { get; set; } = 1;
+
+    private int currentPage;
+    private NewsResult? newsResult;
+    private int totalPages;
+
+    private IReadOnlyList<BitBreadcrumbItem> breadcrumbItems = new List<BitBreadcrumbItem>
+    {
+        new BitBreadcrumbItem { Text = "Home", Link = "/" },
+        new BitBreadcrumbItem { Text = "Notizie" }
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        currentPage = Page < 1 ? 1 : Page;
+        newsResult = await NewsService.GetNewsAsync(currentPage);
+        totalPages = (int)Math.Ceiling((double)newsResult.TotalCount / 10);
+    }
+
+    private static Color GetCategoryColor(string category) => category switch
+    {
+        "Comunicati stampa" => Color.Primary,
+        "Avvisi" => Color.Warning,
+        "Bandi e Concorsi" => Color.Success,
+        "Ordinanze" => Color.Danger,
+        _ => Color.Secondary
+    };
+}
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor
new file mode 100644
index 0000000..8cd8d31
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/Pages/Pratiche.razor
@@ -0,0 +1,146 @@
+@page "/pratiche"
+@rendermode InteractiveServer
+
+@inject IPraticheService PraticheService
+
+<PageTitle>Le Mie Pratiche — Comune di Bitopoli</PageTitle>
+
+<BitBreadcrumb Items="@breadcrumbItems" />
+
+<div class="mt-3 mb-4">
+    <h1 class="h3 fw-bold mb-1">Le Mie Pratiche</h1>
+    <p class="text-muted mb-0">
+        Monitora lo stato delle tue pratiche e istanze presentate al Comune di Bitopoli.
+    </p>
+</div>
+
+<!-- Filtri stato -->
+<div class="d-flex flex-wrap gap-2 mb-4" role="group" aria-label="Filtra per stato">
+    @foreach (var filtro in StatiFiltro)
+    {
+        <button class="btn btn-sm @(statoFiltroAttivo == filtro.Valore ? "btn-primary" : "btn-outline-primary")"
+                @onclick="() => ApplicaFiltroAsync(filtro.Valore)">
+            @if (filtro.Icona is not null)
+            {
+                <BitIcon IconName="@filtro.Icona" />
+            }
+            @filtro.Etichetta
+            @if (filtro.Valore == statoFiltroAttivo && result is not null)
+            {
+                <span class="badge bg-white text-primary ms-1">@result.TotalCount</span>
+            }
+        </button>
+    }
+</div>
+
+@if (result is null)
+{
+    <p><em>Caricamento pratiche in corso...</em></p>
+}
+else if (result.Items.Count == 0)
+{
+    <div class="text-center py-5 text-muted">
+        <BitIcon IconName="@Icons.ItFolder" Size="IconSize.Large" />
+        <p class="mt-2">Nessuna pratica trovata per il filtro selezionato.</p>
+    </div>
+}
+else
+{
+    <div class="row g-3 mb-4">
+        @foreach (var pratica in result.Items)
+        {
+            <div class="col-12 col-md-6">
+                <BitCard Bordered="true" Shadow="CardShadow.Small" FullHeight="true">
+                    <CardBody>
+                        <div class="d-flex justify-content-between align-items-start mb-2">
+                            <div>
+                                <span class="text-muted small">N° @pratica.Id</span>
+                                <CardTitle>@pratica.Titolo</CardTitle>
+                            </div>
+                            <BitBadge Text="@pratica.Stato"
+                                      BackgroundColor="@GetStatoColor(pratica.Stato)"
+                                      Rounded="true" />
+                        </div>
+                        <CardText>
+                            <p class="text-muted small mb-2">@pratica.Descrizione</p>
+                            <div class="d-flex gap-3 small text-muted">
+                                <span>
+                                    <BitIcon IconName="@Icons.ItFolder" />
+                                    @pratica.Categoria
+                                </span>
+                                <span>
+                                    <BitIcon IconName="@Icons.ItClock" />
+                                    @pratica.DataPresentazione.ToString("dd/MM/yyyy")
+                                </span>
+                            </div>
+                        </CardText>
+                        <CardFooter>
+                            <BitButton Color="Color.Primary" Variant="Variant.Outline" Size="Size.Small">
+                                Dettagli
+                            </BitButton>
+                        </CardFooter>
+                    </CardBody>
+                </BitCard>
+            </div>
+        }
+    </div>
+    
+    <BitPagination NumberOfPages="@totalPages"
+                   @bind-Page="currentPage"
+                   @bind-Page:after="LoadPageAsync"
+                   Description="Navigazione pratiche"
+                   Alignment="PaginationAlignment.Center"
+                   PageRangeSize="2"
+                   ShowJumpToPage="true">
+        <TotalItemsTemplate>
+            Pratiche @((currentPage - 1) * PageSize + 1)–@(Math.Min(currentPage * PageSize, result.TotalCount)) di @result.TotalCount
+        </TotalItemsTemplate>
+    </BitPagination>
+}
+
+@code {
+    private const int PageSize = 8;
+
+    private int currentPage = 1;
+    private string? statoFiltroAttivo;
+    private PraticheResult? result;
+    private int totalPages;
+
+    private static readonly IReadOnlyList<(string Etichetta, string? Valore, string? Icona)> StatiFiltro =
+    [
+        ("Tutte",          null,             null),
+        ("In Lavorazione", "In Lavorazione", Icons.ItRefresh),
+        ("In Attesa",      "In Attesa",      Icons.ItClock),
+        ("Completate",     "Completata",     Icons.ItCheckCircle),
+    ];
+
+    private IReadOnlyList<BitBreadcrumbItem> breadcrumbItems =
+    [
+        new BitBreadcrumbItem { Text = "Home", Link = "/" },
+        new BitBreadcrumbItem { Text = "Pratiche" }
+    ];
+
+    protected override async Task OnInitializedAsync()
+        => await LoadPageAsync();
+
+    private async Task ApplicaFiltroAsync(string? stato)
+    {
+        statoFiltroAttivo = stato;
+        currentPage = 1;
+        await LoadPageAsync();
+    }
+
+    private async Task LoadPageAsync()
+    {
+        result = await PraticheService.GetPraticheAsync(currentPage, statoFiltroAttivo);
+        totalPages = (int)Math.Ceiling((double)result.TotalCount / PageSize);
+    }
+
+    private static Color GetStatoColor(string stato) => stato switch
+    {
+        "Completata"     => Color.Success,
+        "In Lavorazione" => Color.Primary,
+        "In Attesa"      => Color.Warning,
+        _                => Color.Secondary
+    };
+}
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/_Imports.razor b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/_Imports.razor
index 7fcd268..8e8dc07 100644
--- a/samples/BitBlazor.Sample/BitBlazor.Sample/Components/_Imports.razor
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Components/_Imports.razor
@@ -14,3 +14,5 @@
 @using BitBlazor.Components
 @using BitBlazor.Utilities
 @using BitBlazor.Form
+@using BitBlazor.Sample.Models
+@using BitBlazor.Sample.Services
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Models/NewsItem.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/NewsItem.cs
new file mode 100644
index 0000000..15e6c3f
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/NewsItem.cs
@@ -0,0 +1,8 @@
+namespace BitBlazor.Sample.Models;
+
+public record NewsItem(
+    int Id,
+    string Title,
+    string Summary,
+    string Category,
+    DateOnly PublishedAt);
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Models/NewsResult.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/NewsResult.cs
new file mode 100644
index 0000000..49ca9e1
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/NewsResult.cs
@@ -0,0 +1,3 @@
+namespace BitBlazor.Sample.Models;
+
+public record NewsResult(IReadOnlyList<NewsItem> Items, int TotalCount);
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Models/PraticaItem.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/PraticaItem.cs
new file mode 100644
index 0000000..b410bf1
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/PraticaItem.cs
@@ -0,0 +1,9 @@
+namespace BitBlazor.Sample.Models;
+
+public record PraticaItem(
+    int Id,
+    string Titolo,
+    string Categoria,
+    string Stato,
+    string Descrizione,
+    DateOnly DataPresentazione);
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Models/PraticheResult.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/PraticheResult.cs
new file mode 100644
index 0000000..16ce6e4
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Models/PraticheResult.cs
@@ -0,0 +1,3 @@
+namespace BitBlazor.Sample.Models;
+
+public record PraticheResult(IReadOnlyList<PraticaItem> Items, int TotalCount);
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Program.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Program.cs
index af08fd6..d3eb5f0 100644
--- a/samples/BitBlazor.Sample/BitBlazor.Sample/Program.cs
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Program.cs
@@ -2,6 +2,7 @@
 using BitBlazor.Sample.Components;
 using BitBlazor.Sample.Components.Account;
 using BitBlazor.Sample.Data;
+using BitBlazor.Sample.Services;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Identity;
 using Microsoft.EntityFrameworkCore;
@@ -40,6 +41,8 @@
     .AddDefaultTokenProviders();
 
 builder.Services.AddSingleton<IEmailSender<ApplicationUser>, IdentityNoOpEmailSender>();
+builder.Services.AddScoped<INewsService, NewsService>();
+builder.Services.AddScoped<IPraticheService, PraticheService>();
 
 var app = builder.Build();
 
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Services/INewsService.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/INewsService.cs
new file mode 100644
index 0000000..1ef8fee
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/INewsService.cs
@@ -0,0 +1,8 @@
+using BitBlazor.Sample.Models;
+
+namespace BitBlazor.Sample.Services;
+
+public interface INewsService
+{
+    Task<NewsResult> GetNewsAsync(int page);
+}
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Services/IPraticheService.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/IPraticheService.cs
new file mode 100644
index 0000000..6095d89
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/IPraticheService.cs
@@ -0,0 +1,8 @@
+using BitBlazor.Sample.Models;
+
+namespace BitBlazor.Sample.Services;
+
+public interface IPraticheService
+{
+    Task<PraticheResult> GetPraticheAsync(int page, string? statoFiltro = null);
+}
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Services/NewsService.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/NewsService.cs
new file mode 100644
index 0000000..7f584e2
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/NewsService.cs
@@ -0,0 +1,49 @@
+using BitBlazor.Sample.Models;
+
+namespace BitBlazor.Sample.Services;
+
+public class NewsService : INewsService
+{
+    private const int PageSize = 10;
+    private const int TotalItems = 50;
+
+    private static readonly string[] Categories =
+    [
+        "Comunicati stampa",
+        "Avvisi",
+        "Bandi e Concorsi",
+        "Ordinanze",
+        "Notizie dal Comune"
+    ];
+
+    private static readonly string[] Summaries =
+    [
+        "Il Comune di Bitopoli rende noto che a partire dalla prossima settimana saranno attivi nuovi sportelli digitali per la cittadinanza.",
+        "L'Amministrazione Comunale informa i cittadini delle modifiche al calendario dei servizi durante il periodo festivo.",
+        "È indetta una selezione pubblica per la formazione di una graduatoria per assunzioni a tempo determinato.",
+        "Si comunica l'ordinanza del Sindaco relativa alla regolamentazione del traffico nelle zone centrali.",
+        "Il Comune presenta il nuovo servizio digitale per la gestione delle pratiche anagrafiche online.",
+        "Pubblicato il bando per l'assegnazione dei contributi a supporto delle attività economiche locali.",
+        "Avviso per i titolari di attività commerciali riguardo alle nuove normative sulle insegne pubblicitarie.",
+        "L'ufficio tecnico informa della chiusura temporanea di alcuni uffici per lavori di manutenzione straordinaria.",
+        "Sono aperte le iscrizioni ai corsi di formazione professionale finanziati dalla Regione.",
+        "Il Comune di Bitopoli aderisce al programma nazionale per la rigenerazione urbana dei quartieri periferici."
+    ];
+
+    public Task<NewsResult> GetNewsAsync(int page)
+    {
+        var skip = (page - 1) * PageSize;
+        var count = Math.Min(PageSize, TotalItems - skip);
+
+        var items = Enumerable.Range(skip + 1, count)
+            .Select(i => new NewsItem(
+                i,
+                $"Comunicazione n. {i:D3} — Aggiornamento servizi comunali",
+                Summaries[(i - 1) % Summaries.Length],
+                Categories[(i - 1) % Categories.Length],
+                DateOnly.FromDateTime(DateTime.Now.AddDays(-(i - 1)))))
+            .ToList();
+
+        return Task.FromResult(new NewsResult(items, TotalItems));
+    }
+}
diff --git a/samples/BitBlazor.Sample/BitBlazor.Sample/Services/PraticheService.cs b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/PraticheService.cs
new file mode 100644
index 0000000..75bcecf
--- /dev/null
+++ b/samples/BitBlazor.Sample/BitBlazor.Sample/Services/PraticheService.cs
@@ -0,0 +1,56 @@
+using BitBlazor.Sample.Models;
+
+namespace BitBlazor.Sample.Services;
+
+public class PraticheService : IPraticheService
+{
+    private const int PageSize = 8;
+
+    private static readonly IReadOnlyList<PraticaItem> AllPratiche =
+    [
+        new(1,  "Rinnovo Carta d'Identità Elettronica",         "Anagrafe",  "Completata",     "Richiesta di rinnovo della CIE scaduta. Documento ritirato allo sportello.",                            new DateOnly(2025, 11, 3)),
+        new(2,  "Cambio di Residenza",                          "Anagrafe",  "In Lavorazione", "Dichiarazione di cambio residenza da Comune di Altamura. Istruttoria in corso.",                        new DateOnly(2026, 1, 14)),
+        new(3,  "Richiesta Certificato di Residenza",           "Anagrafe",  "Completata",     "Certificato emesso in formato digitale con firma elettronica qualificata.",                              new DateOnly(2026, 2, 5)),
+        new(4,  "Calcolo e Pagamento IMU 2025",                 "Tributi",   "Completata",     "Versamento IMU prima e seconda rata per immobile in Via Roma 12. Ricevute allegate.",                   new DateOnly(2025, 6, 10)),
+        new(5,  "Dichiarazione TARI – Variazione Utenza",       "Tributi",   "In Attesa",      "Richiesta di variazione della superficie imponibile. In attesa di sopralluogo tecnico.",                new DateOnly(2026, 3, 2)),
+        new(6,  "Rimborso IMU per Immobile Venduto",            "Tributi",   "In Lavorazione", "Istanza di rimborso per doppio versamento IMU. Documentazione al vaglio dell'ufficio tributi.",        new DateOnly(2026, 4, 18)),
+        new(7,  "CILA – Ristrutturazione Bagno",                "Edilizia",  "Completata",     "Comunicazione inizio lavori per opere interne. Protocollata e accettata.",                              new DateOnly(2025, 9, 22)),
+        new(8,  "Permesso di Costruire – Ampliamento Garage",   "Edilizia",  "In Lavorazione", "Domanda di permesso per ampliamento di 20 mq. Richiesta integrazione documentale ricevuta.",           new DateOnly(2026, 2, 28)),
+        new(9,  "SCIA – Apertura Attività Commerciale",         "SUAP",      "Completata",     "Segnalazione certificata per apertura esercizio di vicinato. Attività avviata.",                       new DateOnly(2025, 7, 15)),
+        new(10, "Modifica Orari Esercizio Pubblico",            "SUAP",      "Completata",     "Comunicazione di variazione orari per bar in Corso Italia. Ricevuta dal SUAP.",                        new DateOnly(2025, 12, 1)),
+        new(11, "Richiesta Patrocinio Comunale",                "Cultura",   "In Attesa",      "Domanda di patrocinio per evento culturale estivo. In attesa di delibera della Giunta.",               new DateOnly(2026, 4, 30)),
+        new(12, "Concessione Spazio Pubblico – Sagra",          "Cultura",   "In Lavorazione", "Richiesta occupazione piazza per manifestazione enogastronomica. Sopralluogo programmato.",            new DateOnly(2026, 5, 10)),
+        new(13, "Iscrizione Asilo Nido Comunale",               "Sociale",   "Completata",     "Domanda di iscrizione per a.s. 2025/26. Ammesso con punteggio 42/60.",                                 new DateOnly(2025, 5, 20)),
+        new(14, "Richiesta Assegno di Maternità",               "Sociale",   "Completata",     "Istanza presentata nei termini. Importo liquidato e accreditato.",                                     new DateOnly(2025, 8, 11)),
+        new(15, "Bonus Affitto – Contributo Canone",            "Sociale",   "In Attesa",      "Domanda contributo affitto bando 2026. Graduatoria in definizione.",                                   new DateOnly(2026, 3, 25)),
+        new(16, "Contrassegno Disabili H",                      "Anagrafe",  "Completata",     "Rinnovo contrassegno di parcheggio per persona con disabilità. Documento consegnato.",                 new DateOnly(2026, 1, 7)),
+        new(17, "Rimborso TARI – Riduzione Compostaggio",       "Tributi",   "In Attesa",      "Richiesta di riduzione tariffaria per autoproduzione compost. Verifica sopralluogo da pianificare.",   new DateOnly(2026, 5, 2)),
+        new(18, "Accesso Atti – Piano Regolatore",              "Edilizia",  "Completata",     "Richiesta di accesso agli atti del PRG vigente. Documentazione consegnata in formato PDF.",            new DateOnly(2026, 2, 14)),
+        new(19, "Voltura TARI – Cambio Intestatario",           "Tributi",   "In Lavorazione", "Richiesta voltura utenza TARI a seguito di compravendita immobile. Ufficio tributi in lavorazione.",  new DateOnly(2026, 4, 4)),
+        new(20, "Concessione Suolo Pubblico – Dehors",          "SUAP",      "In Lavorazione", "Istanza per posa struttura dehors stagionale. Richiesta parere commissione paesaggio.",               new DateOnly(2026, 4, 22)),
+        new(21, "Richiesta Mensa Scolastica",                   "Sociale",   "Completata",     "Iscrizione al servizio mensa per anno scolastico 2025/26. Confermata con fascia ISEE C.",              new DateOnly(2025, 7, 3)),
+        new(22, "Trasporto Scolastico – Iscrizione",            "Sociale",   "Completata",     "Iscrizione al servizio scuolabus per l'a.s. 2025/26. Fermata assegnata: Via Mazzini.",                 new DateOnly(2025, 7, 3)),
+        new(23, "Denuncia di Morte",                            "Anagrafe",  "Completata",     "Dichiarazione di morte registrata in atti. Atto n. 34/2026.",                                          new DateOnly(2026, 3, 18)),
+        new(24, "CILA – Installazione Impianto Fotovoltaico",  "Edilizia",  "In Attesa",      "Comunicazione lavori per installazione pannelli fotovoltaici in copertura. Attesa ricevuta formale.",  new DateOnly(2026, 5, 15)),
+        new(25, "Richiesta Contributo Centri Estivi",           "Sociale",   "In Lavorazione", "Domanda voucher per frequenza centro estivo comunale. Istruttoria avviata.",                           new DateOnly(2026, 5, 18)),
+        new(26, "Autorizzazione Manifesti Elettorali",          "Cultura",   "Completata",     "Autorizzazione per affissione manifesti in periodo elettorale. Spazi assegnati.",                      new DateOnly(2025, 10, 5)),
+        new(27, "Aggiornamento ISEE 2026",                      "Sociale",   "Completata",     "DSU presentata tramite CAF convenzionato. ISEE 2026 registrato nel sistema.",                          new DateOnly(2026, 1, 28)),
+        new(28, "Permesso ZTL – Residente",                     "Anagrafe",  "In Lavorazione", "Richiesta pass ZTL per veicolo intestato al richiedente. Verifica residenza in corso.",               new DateOnly(2026, 5, 5)),
+        new(29, "Denuncia Inizio Attività – B&B",               "SUAP",      "In Attesa",      "DIA per avvio attività ricettiva B&B in appartamento privato. In attesa di parere ASL.",              new DateOnly(2026, 5, 12)),
+        new(30, "Rettifica Atto di Nascita",                    "Anagrafe",  "In Lavorazione", "Istanza di rettifica per errore materiale in trascrizione atto di nascita. Pratiche in corso.",      new DateOnly(2026, 4, 9)),
+    ];
+
+    public Task<PraticheResult> GetPraticheAsync(int page, string? statoFiltro = null)
+    {
+        var filtered = string.IsNullOrEmpty(statoFiltro)
+            ? AllPratiche
+            : AllPratiche.Where(p => p.Stato == statoFiltro).ToList();
+
+        var items = filtered
+            .Skip((page - 1) * PageSize)
+            .Take(PageSize)
+            .ToList();
+
+        return Task.FromResult(new PraticheResult(items, filtered.Count));
+    }
+}
diff --git a/src/BitBlazor/BitBlazor.csproj b/src/BitBlazor/BitBlazor.csproj
index 62ccb6a..fcfca6a 100644
--- a/src/BitBlazor/BitBlazor.csproj
+++ b/src/BitBlazor/BitBlazor.csproj
@@ -31,4 +31,8 @@
     <None Include="..\..\README.md" Pack="true" PackagePath="\" />
   </ItemGroup>
 
+  <ItemGroup>
+    <InternalsVisibleTo Include="BitBlazor.Test" />
+  </ItemGroup>
+
 </Project>
diff --git a/src/BitBlazor/Components/Pagination/BitPageItem.razor b/src/BitBlazor/Components/Pagination/BitPageItem.razor
new file mode 100644
index 0000000..7bf1af3
--- /dev/null
+++ b/src/BitBlazor/Components/Pagination/BitPageItem.razor
@@ -0,0 +1,16 @@
+@namespace BitBlazor.Components
+
+<li class="@ComputePageItemCssClass()">
+    @if (!string.IsNullOrEmpty(Href))
+    {
+        <a class="page-link" href="@Href" @onclick="ClickPageItemAsync" @attributes="attributes">
+            @ChildContent
+        </a>
+    }
+    else
+    {
+        <a class="page-link" style="cursor: pointer;" @onclick="ClickPageItemAsync" @onkeydown="OnKeyDownAsync" @attributes="attributes">
+            @ChildContent
+        </a>
+    }
+</li>
diff --git a/src/BitBlazor/Components/Pagination/BitPageItem.razor.cs b/src/BitBlazor/Components/Pagination/BitPageItem.razor.cs
new file mode 100644
index 0000000..784a6ec
--- /dev/null
+++ b/src/BitBlazor/Components/Pagination/BitPageItem.razor.cs
@@ -0,0 +1,133 @@
+using BitBlazor.Core;
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Represents an individual page item within a pagination component.
+/// </summary>
+/// <remarks>
+/// This class is typically used as a child of the BitPagination component to display a specific page number. 
+/// It manages accessibility attributes based on the current page selection.
+/// </remarks>
+public partial class BitPageItem
+{
+    [CascadingParameter]
+    BitPagination Parent { get; set; } = default!;
+
+    /// <summary>
+    /// Gets or sets the current page index for pagination.
+    /// </summary>
+    /// <remarks>
+    /// Setting this property determines which page of data is displayed or processed. 
+    /// Ensure that the value is within the valid range for the data source.
+    /// </remarks>
+    [Parameter]
+    public int? Page { get; set; }
+
+    /// <summary>
+    /// Gets or sets the callback that is invoked when a page item is clicked.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to handle page item click events in the parent component. 
+    /// The callback is triggered when the user interacts with a page item, allowing custom logic to be executed in response.
+    /// </remarks>
+    [Parameter]
+    public EventCallback PageItemClicked { get; set; }
+
+    /// <summary>
+    /// Gets or sets the content to be rendered inside the component.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to specify the child elements or markup that will be rendered within the component. 
+    /// Typically set implicitly by placing content between the component's opening and closing tags in a Razor file.
+    /// </remarks>
+    [Parameter]
+    [EditorRequired]
+    public RenderFragment ChildContent { get; set; } = default!;
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the component is disabled and cannot be interacted with.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the URL to navigate to when the page item is clicked.
+    /// </summary>
+    /// <remarks>
+    /// When set, the page item renders as a real anchor link with the provided href,
+    /// enabling SSR-compatible navigation and improving accessibility (e.g. right-click "Open in new tab").
+    /// When not set, navigation is handled via the <see cref="PageItemClicked"/> callback.
+    /// </remarks>
+    [Parameter]
+    public string? Href { get; set; }
+
+    private IDictionary<string, object> attributes = new Dictionary<string, object>();
+
+    /// <inheritdoc/>
+    protected override void OnParametersSet()
+    {
+        if (Page.HasValue && Parent.IsCurrentPage(Page.Value))
+        {
+            attributes["aria-current"] = "page";
+        }
+        else
+        {
+            attributes.Remove("aria-current");
+        }
+
+        SetDisabledAttributes();
+    }
+
+    private void SetDisabledAttributes()
+    {
+        if (Disabled)
+        {
+            attributes["aria-hidden"] = "true";
+            attributes["tabindex"] = "-1";
+        }
+        else
+        {
+            attributes.Remove("aria-hidden");
+            if (string.IsNullOrEmpty(Href))
+            {
+                attributes["tabindex"] = "0";
+            }
+            else
+            {
+                attributes.Remove("tabindex");
+            }
+        }
+    }
+
+    private async Task ClickPageItemAsync()
+    {
+        if (Disabled)
+        {
+            return;
+        }
+        
+        await PageItemClicked.InvokeAsync();
+    }
+
+    private async Task OnKeyDownAsync(KeyboardEventArgs args)
+    {
+        if (args.Key is "Enter")
+        {
+            await ClickPageItemAsync();
+        }
+    }
+
+    private string ComputePageItemCssClass()
+    {
+        var builder = new CssClassBuilder("page-item");
+        if (Disabled)
+        {
+            builder.Add("disabled");
+        }
+
+        return builder.Build();
+    }
+}
diff --git a/src/BitBlazor/Components/Pagination/BitPagination.razor b/src/BitBlazor/Components/Pagination/BitPagination.razor
new file mode 100644
index 0000000..ab9c0ae
--- /dev/null
+++ b/src/BitBlazor/Components/Pagination/BitPagination.razor
@@ -0,0 +1,132 @@
+@namespace BitBlazor.Components
+
+@inherits BitComponentBase
+
+<nav class="@ComputeContainerCssClass()" aria-label="@Description" @attributes="AdditionalAttributes">
+    <ul class="pagination">
+        <CascadingValue Value="this">
+            <BitPageItem Disabled="PreviousPageLinkDisabled" Href="@GetPreviousPageHref()" PageItemClicked="MoveToPreviousPageAsync">
+                @RenderPreviousPage()
+            </BitPageItem>
+
+            @switch (ViewMode)
+            {
+                case PaginationViewMode.Simple:
+                    @RenderSimpleModePaginationControl()
+                    break;
+                default:
+                    @RenderFullPaginationControl()
+                    break;
+            }
+
+            <BitPageItem Disabled="NextPageLinkDisabled" Href="@GetNextPageHref()" PageItemClicked="MoveToNextPageAsync">
+                @RenderNextPage()
+            </BitPageItem>
+        </CascadingValue>
+    </ul>
+
+    @if (ShowJumpToPage)
+    {
+        <div class="form-group">
+            <InputText type="text"
+            class="form-control"
+            id="@jumpToPageId"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            disabled="@Disabled"
+            @bind-Value="jumpToPageValue"
+            @bind-Value:after="JumpToPageAsync"
+            @onfocus="SetJumpToPageLabelActive"
+            @onblur="UpdateJumpToPageLabelClass"/>
+            <label for="@jumpToPageId" class="@jumpToPageLabelClass">
+                @(JumpToPageLabelTemplate ?? DefaultJumpToPageLabelTemplate)
+            </label>
+        </div>
+    }
+
+    @if (TotalItemsTemplate is not null)
+    {
+        <p>@TotalItemsTemplate</p>
+    }
+</nav>
+
+@code {
+    private RenderFragment RenderFullPaginationControl() => __builder =>
+        {
+            foreach (var pageItem in GetPageSequence())
+            {
+                if (pageItem is null)
+                {
+                    <li class="page-item">
+                        <span class="page-link">...</span>
+                    </li>
+                }
+                else
+                {
+                    <BitPageItem Page="pageItem" Disabled="Disabled" Href="@GetPageHref(pageItem.Value)" PageItemClicked="@(() => ChangePageAsync(pageItem.Value))">
+                        @pageItem
+                    </BitPageItem>
+                }
+            }
+        };
+
+    private RenderFragment RenderSimpleModePaginationControl() => __builder =>
+    {
+        <li class="page-item">
+            <span class="page-link" aria-current="page">@state.CurrentPage</span>
+        </li>
+        <li class="page-item">
+            <span class="page-link">/</span>
+        </li>
+        <li class="page-item">
+            <span class="page-link">@NumberOfPages</span>
+        </li>
+        <li class="page-item visually-hidden">
+            <a class="page-link" href="#" aria-current="page" @onclick:preventDefault>
+                @if (SimpleModeVisuallyHiddenTemplate is not null)
+                {
+                    @SimpleModeVisuallyHiddenTemplate(state)
+                }
+                else
+                {
+                    @DefaultSimpleModeVisuallyHiddenTemplate
+                }
+            </a>
+        </li>
+    };
+
+    private string DefaultSimpleModeVisuallyHiddenTemplate => $"page {state.CurrentPage} of {state.NumberOfPages}";
+
+    private RenderFragment RenderPreviousPage()
+    {
+        if (PreviousPageTemplate is not null)
+        {
+            return PreviousPageTemplate;
+        }
+
+        return __builder =>
+        {
+            <BitIcon Color="IconColor.Primary" IconName="@Icons.ItChevronLeft" />
+            <span class="visually-hidden">@PreviousPageLabel</span>
+        };
+    }
+
+    private RenderFragment RenderNextPage()
+    {
+        if (NextPageTemplate is not null)
+        {
+            return NextPageTemplate;
+        }
+
+        return __builder =>
+        {
+            <span class="visually-hidden">@NextPageLabel</span>
+            <BitIcon Color="IconColor.Primary" IconName="@Icons.ItChevronRight" />
+        };
+    }
+
+    private static RenderFragment DefaultJumpToPageLabelTemplate => __builder =>
+    {
+        <span aria-hidden="true">go to...</span><span class="visually-hidden">Set the destination page</span>
+    };
+}
diff --git a/src/BitBlazor/Components/Pagination/BitPagination.razor.cs b/src/BitBlazor/Components/Pagination/BitPagination.razor.cs
new file mode 100644
index 0000000..822de15
--- /dev/null
+++ b/src/BitBlazor/Components/Pagination/BitPagination.razor.cs
@@ -0,0 +1,314 @@
+using BitBlazor.Core;
+using Microsoft.AspNetCore.Components;
+
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Represents a component that provides pagination functionality for navigating large data sets in a user interface.
+/// </summary>
+/// <remarks>
+/// Use this component to enable users to move between pages of data efficiently.
+/// </remarks>
+public partial class BitPagination : BitComponentBase
+{
+    /// <summary>
+    /// Gets or sets the total number of pages available for pagination.
+    /// </summary>
+    /// <remarks>
+    /// This property must be set before rendering the component to ensure correct pagination behavior. 
+    /// The value should be a positive integer representing the total number of pages in the data set.
+    /// </remarks>
+    [Parameter]
+    [EditorRequired]
+    public int NumberOfPages { get; set; } = 1;
+
+    /// <summary>
+    /// Gets or sets the current page number. The default value is 1.
+    /// </summary>
+    /// <remarks>
+    /// The value must be greater than or equal to 1; specifying a value less than 1 may result in unexpected behavior.
+    /// </remarks>
+    [Parameter]
+    public int Page { get; set; } = 1;
+
+    /// <summary>
+    /// Gets or sets the callback that is invoked when the current page changes.
+    /// </summary>
+    /// <remarks>
+    /// Use this parameter to handle page change events in the parent component. 
+    /// The callback receives the new page number as an integer argument, allowing the parent to update its state or perform additional actions in response to pagination.
+    /// </remarks>
+    [Parameter]
+    public EventCallback<int> PageChanged { get; set; }
+
+    /// <summary>
+    /// Gets or sets the component's description which will be put in the aria-label attribute of the main container
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public string Description { get; set; } = string.Empty;
+
+    /// <summary>
+    /// Gets or sets the label text displayed for the previous page navigation link.
+    /// </summary>
+    /// <remarks>
+    /// Set this property to customize the text shown for the previous page button in the pagination component. 
+    /// The default value is "previous page".
+    /// </remarks>
+    [Parameter]
+    public string PreviousPageLabel { get; set; } = "previous page";
+
+    /// <summary>
+    /// Gets or sets the template used to render the previous page button in the pager component.
+    /// </summary>
+    /// <remarks>
+    /// Set this property to customize the appearance or content of the previous page navigation button. 
+    /// If not set, a default template is used.
+    /// </remarks>
+    [Parameter]
+    public RenderFragment? PreviousPageTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets the label text displayed for the next page navigation link.
+    /// </summary>
+    /// <remarks> 
+    /// Set this property to customize the text shown to users for the next page button in the pagination component.
+    /// The default value is "next page".
+    /// </remarks>
+    [Parameter]
+    public string NextPageLabel { get; set; } = "next page";
+
+    /// <summary>
+    /// Gets or sets the template used to render the content for the next page button.
+    /// </summary>
+    /// <remarks>
+    /// Set this property to customize the appearance or behavior of the next page navigation element. 
+    /// If not set, a default template may be used.
+    /// </remarks>
+    [Parameter]
+    public RenderFragment? NextPageTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets the alignment of the pagination controls within their container.
+    /// </summary>
+    /// <remarks>
+    /// The default value is <see cref="PaginationAlignment.Left"/>, which aligns the pagination controls to the left. 
+    /// Other options, such as center or right alignment, can be used to adjust the visual positioning of the pagination elements as needed.
+    /// </remarks>
+    [Parameter]
+    public PaginationAlignment Alignment { get; set; } = PaginationAlignment.Left;
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the component is disabled and cannot be interacted with.
+    /// </summary>
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    /// <summary>
+    /// Gets or sets the number of page buttons to show on each side of the current page
+    /// before an ellipsis is rendered. When <c>null</c>, all pages are always shown.
+    /// </summary>
+    [Parameter]
+    public int? PageRangeSize { get; set; }
+    
+    /// <summary>
+    /// Gets or sets the template used to display the total number of items.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to customize how to display the pagination total section.
+    /// </remarks>
+    [Parameter]
+    public RenderFragment? TotalItemsTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether the jump-to-page control is displayed in the pagination component.
+    /// </summary>
+    [Parameter]
+    public bool ShowJumpToPage { get; set; }
+
+    /// <summary>
+    /// Gets or sets the template used to render the label for the jump-to-page input.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? JumpToPageLabelTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets the display mode for the pagination component.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to control how the pagination UI is rendered. 
+    /// The available modes are defined by the PaginationViewMode enumeration. 
+    /// Changing this property affects the appearance and behavior of the pagination controls.
+    /// </remarks>
+    [Parameter]
+    public PaginationViewMode ViewMode { get; set; } = PaginationViewMode.Default;
+
+    /// <summary>
+    /// Gets or sets the template used to render visually hidden content for simple mode pagination, typically for accessibility purposes.
+    /// If not provided a default content (i.e. "page 1 of 10") will be displayed.
+    /// </summary>
+    /// <remarks>
+    /// Use this template to provide additional information for screen readers or assistive technologies when simple mode pagination is enabled. 
+    /// The template receives the current pagination state as its context.
+    /// </remarks>
+    [Parameter]
+    public RenderFragment<PaginationState>? SimpleModeVisuallyHiddenTemplate { get; set; }
+
+    /// <summary>
+    /// Gets or sets a function that generates the navigation URL for a given page number.
+    /// </summary>
+    /// <remarks>
+    /// When set, each page item (including previous and next) renders as a real anchor link,
+    /// enabling SSR-compatible navigation and browser features such as "Open in new tab".
+    /// In interactive render modes, <see cref="PageChanged"/> still fires on click; the href
+    /// acts as progressive enhancement.
+    /// Previous and next links receive <c>null</c> when already on the first or last page respectively,
+    /// falling back to <c>href="#"</c>.
+    /// </remarks>
+    [Parameter]
+    public Func<int, string>? PageLinkGenerator { get; set; }
+
+    private string jumpToPageId = string.Empty;
+    private string jumpToPageLabelClass = string.Empty;
+    private string jumpToPageValue = string.Empty;
+
+    private PaginationState state;
+
+    private bool PreviousPageLinkDisabled => Disabled || state.IsFirstPage;
+
+    private bool NextPageLinkDisabled => Disabled || state.IsLastPage;
+
+    /// <inheritdoc/>
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        state = new(Page, NumberOfPages);
+
+        if (ShowJumpToPage)
+        {
+            SetJumpToPageDefaults();
+        }
+    }
+
+    internal bool IsCurrentPage(int page) => state.CurrentPage == page;
+
+    private void SetJumpToPageDefaults()
+    {
+        if (string.IsNullOrEmpty(jumpToPageId))
+        {
+            var baseId = !string.IsNullOrWhiteSpace(Id) ? Id : Guid.NewGuid().ToString("N");
+            jumpToPageId = $"jumpToPage-{baseId}";
+        }
+    }
+
+    private async Task ChangePageAsync(int page)
+    {
+        if (state.CurrentPage == page)
+        {
+            return;
+        }
+
+        state = state with { CurrentPage = page };
+        await PageChanged.InvokeAsync(page);
+    }
+
+    private async Task MoveToPreviousPageAsync()
+    {
+        if (state.IsFirstPage)
+        {
+            return;
+        }
+
+        var page = state.CurrentPage - 1;
+        await ChangePageAsync(page);
+    }
+
+    private async Task MoveToNextPageAsync()
+    {
+        if (state.IsLastPage)
+        {
+            return;
+        }
+
+        var page = state.CurrentPage + 1;
+        await ChangePageAsync(page);
+    }
+
+    private string ComputeContainerCssClass()
+    {
+        var builder = new CssClassBuilder("pagination-wrapper");
+
+        var alignmentClass = Alignment switch
+        {
+            PaginationAlignment.Center => "justify-content-center",
+            PaginationAlignment.Right => "justify-content-end",
+            _ => string.Empty
+        };
+        builder.Add(alignmentClass);
+
+        if (TotalItemsTemplate is not null)
+        {
+            builder.Add("pagination-total");
+        }
+
+        AddCustomCssClass(builder);
+
+        return builder.Build();
+    }
+
+    internal IEnumerable<int?> GetPageSequence()
+    {
+        if (PageRangeSize is null)
+            return Enumerable.Range(1, state.NumberOfPages).Select(p => (int?)p);
+
+        var range = PageRangeSize.Value;
+        var start = Math.Max(2, state.CurrentPage - range);
+        var end = Math.Min(state.NumberOfPages - 1, state.CurrentPage + range);
+
+        var result = new List<int?> { 1 };
+
+        if (start > 2) result.Add(null);
+        for (int i = start; i <= end; i++) result.Add(i);
+        if (end < state.NumberOfPages - 1) result.Add(null);
+
+        if (state.NumberOfPages > 1) result.Add(state.NumberOfPages);
+
+        return result;
+    }
+
+    private async Task JumpToPageAsync()
+    {
+        try
+        {
+            if (!int.TryParse(jumpToPageValue, out int page))
+            {
+                return;
+            }
+
+            if (page < 1 || page > state.NumberOfPages)
+            {
+                return;
+            }
+
+            await ChangePageAsync(page);
+        }
+        finally
+        {
+            jumpToPageValue = string.Empty;
+        }
+    }
+
+    private void SetJumpToPageLabelActive() => jumpToPageLabelClass = "active";
+
+    private void UpdateJumpToPageLabelClass() 
+        => jumpToPageLabelClass = string.IsNullOrEmpty(jumpToPageValue) ? string.Empty : "active";
+
+    private string? GetPageHref(int page)
+        => PageLinkGenerator?.Invoke(page);
+
+    private string? GetPreviousPageHref()
+        => !state.IsFirstPage ? GetPageHref(state.CurrentPage - 1) : null;
+
+    private string? GetNextPageHref()
+        => !state.IsLastPage ? GetPageHref(state.CurrentPage + 1) : null;
+}
diff --git a/src/BitBlazor/Components/Pagination/PaginationAlignment.cs b/src/BitBlazor/Components/Pagination/PaginationAlignment.cs
new file mode 100644
index 0000000..77801b7
--- /dev/null
+++ b/src/BitBlazor/Components/Pagination/PaginationAlignment.cs
@@ -0,0 +1,26 @@
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Specifies the alignment of pagination elements within a layout.
+/// </summary>
+/// <remarks>
+/// This enumeration allows for the alignment of pagination controls to be specified as either left, center, or right. 
+/// It is useful for customizing the appearance of pagination in user interfaces.
+/// </remarks>
+public enum PaginationAlignment
+{
+    /// <summary>
+    /// Left alignment (Default)
+    /// </summary>
+    Left,
+
+    /// <summary>
+    /// Center alignment
+    /// </summary>
+    Center,
+
+    /// <summary>
+    /// Right alignment
+    /// </summary>
+    Right
+}
diff --git a/src/BitBlazor/Components/Pagination/PaginationState.cs b/src/BitBlazor/Components/Pagination/PaginationState.cs
new file mode 100644
index 0000000..a32988d
--- /dev/null
+++ b/src/BitBlazor/Components/Pagination/PaginationState.cs
@@ -0,0 +1,19 @@
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Represents the state of the pagination control, including the current page and the total number of pages
+/// </summary>
+/// <param name="CurrentPage">The current page selected</param>
+/// <param name="NumberOfPages">The total number of pages</param>
+public record struct PaginationState(int CurrentPage, int NumberOfPages)
+{
+    /// <summary>
+    /// Gets a value indicating whether the current page is the first page in the sequence.
+    /// </summary>
+    public bool IsFirstPage => CurrentPage == 1;
+
+    /// <summary>
+    /// Gets a value indicating whether the current page is the last page in the collection.
+    /// </summary>
+    public bool IsLastPage => CurrentPage == NumberOfPages;
+}
diff --git a/src/BitBlazor/Components/Pagination/PaginationViewMode.cs b/src/BitBlazor/Components/Pagination/PaginationViewMode.cs
new file mode 100644
index 0000000..d39ece2
--- /dev/null
+++ b/src/BitBlazor/Components/Pagination/PaginationViewMode.cs
@@ -0,0 +1,21 @@
+namespace BitBlazor.Components;
+
+/// <summary>
+/// Specifies the available display modes for pagination controls.
+/// </summary>
+/// <remarks>
+/// Use this enumeration to select between different pagination UI styles, such as a full-featured or simplified view. 
+/// The selected mode determines how navigation elements are presented to the user.
+/// </remarks>
+public enum PaginationViewMode
+{
+    /// <summary>
+    /// Renders the full pagination control
+    /// </summary>
+    Default,
+
+    /// <summary>
+    /// Renders the pagination control in simple mode (see https://italia.github.io/bootstrap-italia/docs/componenti/paginazione/#simple-mode)
+    /// </summary>
+    Simple
+}
diff --git a/stories/BitBlazor.Stories/Components/Stories/Components/BitPagination.stories.razor b/stories/BitBlazor.Stories/Components/Stories/Components/BitPagination.stories.razor
new file mode 100644
index 0000000..c6ca501
--- /dev/null
+++ b/stories/BitBlazor.Stories/Components/Stories/Components/BitPagination.stories.razor
@@ -0,0 +1,161 @@
+@attribute [Stories("Components/BitPagination")]
+
+<Stories TComponent="BitPagination">
+
+    <ArgType For="_ => _.Page" DefaultValue="1" />
+    <ArgType For="_ => _.NumberOfPages" DefaultValue="3" />
+    <ArgType For="_ => _.Description" />
+    <ArgType For="_ => _.Alignment" Control="ControlType.Select" />
+    <ArgType For="_ => _.PreviousPageLabel" />
+    <ArgType For="_ => _.NextPageLabel" />
+    <ArgType For="_ => _.Disabled" />
+    <ArgType For="_ => _.PageRangeSize" />
+    <ArgType For="_ => _.ShowJumpToPage" />
+    <ArgType For="_ => _.JumpToPageLabelTemplate" />
+    <ArgType For="_ => _.ViewMode" DefaultValue="PaginationViewMode.Default" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _.NumberOfPages" Value="3" />
+            <Arg For="_ => _.Description" Value="@("Page navigation")" />
+            <Arg For="_ => _.Alignment" Value="PaginationAlignment.Left" />
+            <Arg For="_ => _.Disabled" Value="false" />
+            <Arg For="_ => _.PageRangeSize" />
+            <Arg For="_ => _.ShowJumpToPage" />
+            <Arg For="_ => _.JumpToPageLabelTemplate" Value="@JumpToPageLabelTemplate" />
+            <Arg For="_ => _.ViewMode" Value="PaginationViewMode.Default" />
+        </Arguments>
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination @attributes="context.Args"
+                               @bind-Page="model.DefaultStoryPage"/>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Disabled pagination">
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination NumberOfPages="3"
+                               Description="Page navigation"
+                               @bind-Page="model.DisabledStoryPage"
+                               Disabled="true"/>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Pagination alignment">
+        <Arguments>
+            <Arg For="_ => _.Alignment" Value="PaginationAlignment.Left" />
+        </Arguments>
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination @attributes="context.Args" 
+                               NumberOfPages="3"
+                               Description="Page navigation"
+                               @bind-Page="model.AlignmentStoryPage"/>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Page range size">
+        <Arguments>
+            <Arg For="_ => _.PageRangeSize" Value="2" />
+        </Arguments>
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination @attributes="context.Args" 
+                               NumberOfPages="50"
+                               Description="Page navigation"
+                               @bind-Page="model.PageRangeStoryPage" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Jump to page">
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination NumberOfPages="50"
+                               Description="Page navigation"
+                               PageRangeSize="2"
+                               ShowJumpToPage="true"
+                               @bind-Page="model.JumpToPageStoryValue">
+                    <JumpToPageLabelTemplate>
+                        <span aria-hidden="true">go to...</span><span class="visually-hidden">Set the destination page</span>
+                    </JumpToPageLabelTemplate>
+                </BitPagination>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Simple mode">
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination NumberOfPages="5"
+                               Description="Page navigation with simple mode"
+                               @bind-Page="model.SimpleModeStoryValue"
+                               ViewMode="PaginationViewMode.Simple">
+                </BitPagination>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Text links">
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination NumberOfPages="50"
+                               PageRangeSize="2"
+                               Description="Page navigation with text links"
+                               @bind-Page="model.TextLinksStoryPage">
+                    <PreviousPageTemplate>
+                        Previous <span class="visually-hidden">page</span>
+                    </PreviousPageTemplate>
+                    <NextPageTemplate>
+                        Next <span class="visually-hidden">page</span>
+                    </NextPageTemplate>
+                </BitPagination>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Total number">
+        <Template>
+            <div class="px-2 py-2">
+                <BitPagination NumberOfPages="50"
+                               PageRangeSize="2"
+                               Description="Page navigation with total number"
+                               @bind-Page="model.TotalNumberStoryPage">
+                    <TotalItemsTemplate>300 items total</TotalItemsTemplate>
+                </BitPagination>
+            </div>
+        </Template>
+    </Story>
+</Stories>
+
+@code {
+    private ViewModel model = new();
+
+    class ViewModel
+    {
+        public int DefaultStoryPage { get; set; } = 1;
+
+        public int DisabledStoryPage { get; set; } = 1;
+
+        public int AlignmentStoryPage { get; set; } = 1;
+
+        public int PageRangeStoryPage { get; set; } = 1;
+
+        public int JumpToPageStoryValue { get; set; } = 26;
+
+        public int SimpleModeStoryValue { get; set; } = 1;
+
+        public int TextLinksStoryPage { get; set; } = 26;
+
+        public int TotalNumberStoryPage { get; set; } = 24;
+    }
+
+    private RenderFragment JumpToPageLabelTemplate => __builder =>
+    {
+        <span aria-hidden="true">go to...</span><span class="visually-hidden">Set the destination page</span>
+    };
+}
diff --git a/tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Behaviors.cs b/tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Behaviors.cs
new file mode 100644
index 0000000..0f7a94d
--- /dev/null
+++ b/tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Behaviors.cs
@@ -0,0 +1,223 @@
+using BitBlazor.Components;
+using Bunit;
+
+namespace BitBlazor.Test.Components.Pagination;
+
+public class BitPaginationTest
+{
+    [Fact]
+    public void BitPagination_Should_Change_Current_Page_When_Page_Link_Is_Clicked()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 1;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Bind(p => p.Page, page, v => page = v));
+
+        var pageItem = component.FindComponents<BitPageItem>().First(p => p.Instance.Page == 2);
+        var pageLink = pageItem.Find(".page-item > .page-link");
+
+        pageLink.Click();
+
+        Assert.Equal(2, page);
+        Assert.Equal("page", pageLink.GetAttribute("aria-current"));
+    }
+
+    [Fact]
+    public void BitPagination_Should_Move_To_Previous_Page_When_PreviousPage_Link_Is_Clicked()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 2;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Bind(p => p.Page, page, v => page = v));
+
+        var pageLink = component.FindAll(".page-item > .page-link").First();
+        pageLink.Click();
+
+        Assert.Equal(1, page);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Move_To_Next_Page_When_NextPage_Link_Is_Clicked()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 2;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Bind(p => p.Page, page, v => page = v));
+
+        var pageLink = component.FindAll(".page-item > .page-link").Last();
+        pageLink.Click();
+
+        Assert.Equal(3, page);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Not_Change_Page_When_PreviousPage_Link_Is_Clicked_And_Current_Page_Is_First_Page()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 1;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Bind(p => p.Page, page, v => page = v));
+
+        var pageLink = component.FindAll(".page-item > .page-link").First();
+        pageLink.Click();
+
+        Assert.Equal(1, page);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Not_Change_Page_When_NextPage_Link_Is_Clicked_And_Current_Page_Is_Last_Page()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 3;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Bind(p => p.Page, page, v => page = v));
+
+        var pageLink = component.FindAll(".page-item > .page-link").Last();
+        pageLink.Click();
+
+        Assert.Equal(3, page);
+    }
+
+    [Fact]
+    public void BitPagination_GetPageSequence_Returns_All_Pages_When_PageRangeSize_Is_Null()
+    {
+        using var ctx = new BunitContext();
+
+        var component = ctx.Render<BitPagination>(
+            p => p.Add(x => x.NumberOfPages, 10)
+                  .Add(x => x.Description, "pagination")
+                  .Add(x => x.Page, 5));
+
+        var sequence = component.Instance.GetPageSequence().ToList();
+
+        Assert.Equal(10, sequence.Count);
+        Assert.DoesNotContain(null, sequence);
+    }
+
+    [Fact]
+    public void BitPagination_GetPageSequence_Returns_Ellipsis_For_Middle_Page()
+    {
+        using var ctx = new BunitContext();
+
+        var component = ctx.Render<BitPagination>(
+            p => p.Add(x => x.NumberOfPages, 50)
+                  .Add(x => x.Description, "pagination")
+                  .Add(x => x.Page, 26)
+                  .Add(x => x.PageRangeSize, 2));
+
+        var sequence = component.Instance.GetPageSequence().ToList();
+
+        // 1, null, 24, 25, 26, 27, 28, null, 50
+        Assert.Equal(9, sequence.Count);
+        Assert.Equal(1,sequence[0]);
+        Assert.Null(sequence[1]);
+        Assert.Equal(24, sequence[2]);
+        Assert.Equal(26, sequence[4]);
+        Assert.Null(sequence[7]);
+        Assert.Equal(50, sequence[8]);
+    }
+
+    [Fact]
+    public void BitPagination_GetPageSequence_No_Leading_Ellipsis_When_Near_Start()
+    {
+        using var ctx = new BunitContext();
+
+        var component = ctx.Render<BitPagination>(
+            p => p.Add(x => x.NumberOfPages, 50)
+                  .Add(x => x.Description, "pagination")
+                  .Add(x => x.Page, 2)
+                  .Add(x => x.PageRangeSize, 2));
+
+        var sequence = component.Instance.GetPageSequence().ToList();
+
+        Assert.Equal(1, sequence[0]);
+        Assert.Equal(2, sequence[1]); // no ellipsis after page 1
+        Assert.NotNull(sequence[1]);
+    }
+
+    [Fact]
+    public void BitPagination_GetPageSequence_No_Trailing_Ellipsis_When_Near_End()
+    {
+        using var ctx = new BunitContext();
+
+        var component = ctx.Render<BitPagination>(
+            p => p.Add(x => x.NumberOfPages, 50)
+                  .Add(x => x.Description, "pagination")
+                  .Add(x => x.Page, 49)
+                  .Add(x => x.PageRangeSize, 2));
+
+        var sequence = component.Instance.GetPageSequence().ToList();
+
+        Assert.Equal(50, sequence[^1]);
+        Assert.Equal(49, sequence[^2]); // no ellipsis before last page
+        Assert.NotNull(sequence[^2]);
+    }
+
+    [Fact]
+    public void BitPagination_Jump_To_Page_Should_Change_Current_Page()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 1;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Add(p => p.ShowJumpToPage, true)
+                .Add(p => p.Id, "test-pagination")
+                .Bind(p => p.Page, page, v => page = v));
+
+        var jumpToPageInput = component.Find("input#jumpToPage-test-pagination");
+        jumpToPageInput.Change("2");
+
+        Assert.Equal(2, page);
+    }
+
+    [Fact]
+    public void BitPagination_With_PageLinkGenerator_Should_Still_Invoke_PageChanged_When_Page_Item_Is_Clicked()
+    {
+        using var ctx = new BunitContext();
+
+        int page = 1;
+
+        var component = ctx.Render<BitPagination>(
+            parameters => parameters
+                .Add(p => p.NumberOfPages, 3)
+                .Add(p => p.Description, "pagination")
+                .Add(p => p.PageLinkGenerator, (Func<int, string>)(p => $"/items/{p}"))
+                .Bind(p => p.Page, page, v => page = v));
+
+        var pageItem = component.FindComponents<BitPageItem>().First(p => p.Instance.Page == 2);
+        var pageLink = pageItem.Find(".page-item > .page-link");
+
+        pageLink.Click();
+
+        Assert.Equal(2, page);
+    }
+}
diff --git a/tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Rendering.razor b/tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Rendering.razor
new file mode 100644
index 0000000..c2c767c
--- /dev/null
+++ b/tests/BitBlazor.Test/Components/Pagination/BitPaginationTest.Rendering.razor
@@ -0,0 +1,382 @@
+@inherits BunitContext
+
+@code {
+    [Fact]
+    public void BitPagination_Should_Render_Correctly()
+    {
+        int currentPage = 1;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                                @bind-Page="@currentPage"
+                                Description="Page navigation" />);
+
+                component.MarkupMatches(
+                    @<nav class="pagination-wrapper" aria-label="Page navigation">
+                        <ul class="pagination">
+                            <li class="page-item disabled">
+                                <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                                    <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-left" /></svg>
+                                    <span class="visually-hidden">previous page</span>
+                                </a>
+                            </li>
+                            <li class="page-item"><a class="page-link" aria-current="page" tabindex="0" style="cursor: pointer;">1</a></li>
+                            <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">2</a></li>
+                            <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">3</a></li>
+                            <li class="page-item">
+                                <a class="page-link" style="cursor: pointer;" tabindex="0">
+                                    <span class="visually-hidden">next page</span>
+                                    <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-right" /></svg>
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>);
+    }
+
+    [Theory]
+    [InlineData(PaginationAlignment.Left, "")]
+    [InlineData(PaginationAlignment.Center, "justify-content-center")]
+    [InlineData(PaginationAlignment.Right, "justify-content-end")]
+    public void BitPagination_Should_Apply_Alignment_As_Expected(PaginationAlignment alignment, string expectedAlignmentClass)
+    {
+        int currentPage = 1;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                                @bind-Page="@currentPage"
+                                Description="Page navigation"
+                                Alignment="alignment" />);
+
+                component.MarkupMatches(
+                    @<nav class="pagination-wrapper @expectedAlignmentClass" aria-label="Page navigation">
+                        <ul class="pagination">
+                            <li class="page-item disabled">
+                                <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                                    <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-left" /></svg>
+                                    <span class="visually-hidden">previous page</span>
+                                </a>
+                            </li>
+                            <li class="page-item"><a class="page-link" aria-current="page" tabindex="0" style="cursor: pointer;">1</a></li>
+                            <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">2</a></li>
+                            <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">3</a></li>
+                            <li class="page-item">
+                                <a class="page-link" style="cursor: pointer;" tabindex="0">
+                                    <span class="visually-hidden">next page</span>
+                                    <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-right" /></svg>
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Render_All_Items_Disabled()
+    {
+        int currentPage = 1;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                            @bind-Page="currentPage"
+                            Description="Page navigation"
+                            Disabled="true" />);
+
+        component.MarkupMatches(
+            @<nav class="pagination-wrapper" aria-label="Page navigation">
+                <ul class="pagination">
+                    <li class="page-item disabled">
+                        <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-left" /></svg>
+                            <span class="visually-hidden">previous page</span>
+                        </a>
+                    </li>
+                    <li class="page-item disabled"><a class="page-link" tabindex="-1" aria-hidden="true" aria-current="page" style="cursor: pointer;">1</a></li>
+                    <li class="page-item disabled"><a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">2</a></li>
+                    <li class="page-item disabled"><a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">3</a></li>
+                    <li class="page-item disabled">
+                        <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                            <span class="visually-hidden">next page</span>
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-right" /></svg>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Render_Ellipsis_When_PageRangeSize_Is_Set()
+    {
+        int currentPage = 26;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="50"
+                            @bind-Page="currentPage"
+                            Description="Page navigation"
+                            PageRangeSize="2" />);
+
+                // prev, 1, ..., 24, 25, 26, 27, 28, ..., 50, next = 11 items
+        var pageItems = component.FindAll(".page-item");
+        Assert.Equal(11, pageItems.Count);
+
+        var ellipses = component.FindAll(".page-item > span.page-link");
+        Assert.Equal(2, ellipses.Count);
+        Assert.All(ellipses, e => Assert.Equal("...", e.TextContent));
+    }
+
+    [Fact]
+    public void BitPagination_Should_Not_Render_Ellipsis_When_PageRangeSize_Is_Null()
+    {
+        int currentPage = 26;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="50"
+                            @bind-Page="currentPage"
+                            Description="Page navigation" />);
+
+        var ellipses = component.FindAll(".page-item > span.page-link");
+        Assert.Empty(ellipses);
+    }
+
+    [Theory]
+    [InlineData(3, 2, false, true)]    // near start — no leading ellipsis, trailing ellipsis
+    [InlineData(48, 2, true, false)]   // near end — leading ellipsis, no trailing ellipsis
+    [InlineData(26, 2, true, true)]    // middle — both ellipses
+    public void BitPagination_Should_Render_Correct_Ellipsis_Position(int currentPage, int rangeSize, bool expectLeading, bool expectTrailing)
+    {
+        var component = Render(
+            @<BitPagination NumberOfPages="50"
+                            @bind-Page="currentPage"
+                            Description="Page navigation"
+                            PageRangeSize="rangeSize" />);
+
+        var pageItems = component.FindAll(".page-item").ToList();
+        // skip first (prev arrow) and last (next arrow)
+        var inner = pageItems.Skip(1).Take(pageItems.Count - 2).ToList();
+
+        bool hasLeading = inner[1].QuerySelector("span.page-link") is not null;
+        bool hasTrailing = inner[^2].QuerySelector("span.page-link") is not null;
+
+        Assert.Equal(expectLeading, hasLeading);
+        Assert.Equal(expectTrailing, hasTrailing);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Render_TotalItemsTemplate_If_Specified()
+    {
+        var currentPage = 1;
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                            @bind-Page="currentPage"
+                            Description="Page navigation">
+                <TotalItemsTemplate>100 items total</TotalItemsTemplate>
+            </BitPagination>);
+
+        component.MarkupMatches(
+            @<nav class="pagination-wrapper pagination-total" aria-label="Page navigation">
+                <ul class="pagination">
+                    <li class="page-item disabled">
+                        <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-left" /></svg>
+                            <span class="visually-hidden">previous page</span>
+                        </a>
+                    </li>
+                    <li class="page-item"><a class="page-link" aria-current="page" tabindex="0" style="cursor: pointer;">1</a></li>
+                    <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">2</a></li>
+                    <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">3</a></li>
+                    <li class="page-item">
+                        <a class="page-link" style="cursor: pointer;" tabindex="0">
+                            <span class="visually-hidden">next page</span>
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-right" /></svg>
+                        </a>
+                    </li>
+                </ul>
+                <p>100 items total</p>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Render_Navigation_Custom_Templates_If_Specified()
+    {
+        int currentPage = 1;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                            @bind-Page="@currentPage"
+                            Description="Page navigation">
+                <PreviousPageTemplate>
+                    Previous <span class="visually-hidden">page</span>
+                </PreviousPageTemplate>
+                <NextPageTemplate>
+                    Next <span class="visually-hidden">page</span>
+                </NextPageTemplate>
+            </BitPagination>);
+
+        component.MarkupMatches(
+            @<nav class="pagination-wrapper" aria-label="Page navigation">
+                <ul class="pagination">
+                    <li class="page-item disabled">
+                        <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                            Previous <span class="visually-hidden">page</span>
+                        </a>
+                    </li>
+                    <li class="page-item"><a class="page-link" aria-current="page" tabindex="0" style="cursor: pointer;">1</a></li>
+                    <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">2</a></li>
+                    <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">3</a></li>
+                    <li class="page-item">
+                        <a class="page-link" style="cursor: pointer;" tabindex="0">
+                            Next <span class="visually-hidden">page</span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Render_Jump_To_Page_Control_If_Enabled()
+    {
+        var currentPage = 1;
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                            @bind-Page="currentPage"
+                            Description="Page navigation"
+                            ShowJumpToPage="true"
+                            Id="test-pagination">
+                <JumpToPageLabelTemplate>
+                    <span aria-hidden="true">go to page...</span><span class="visually-hidden">set the destination page</span>
+                </JumpToPageLabelTemplate>
+            </BitPagination>);
+
+        component.MarkupMatches(
+            @<nav class="pagination-wrapper" aria-label="Page navigation" id="test-pagination">
+                <ul class="pagination">
+                    <li class="page-item disabled">
+                        <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-left" /></svg>
+                            <span class="visually-hidden">previous page</span>
+                        </a>
+                    </li>
+                    <li class="page-item"><a class="page-link" aria-current="page" tabindex="0" style="cursor: pointer;">1</a></li>
+                    <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">2</a></li>
+                    <li class="page-item"><a class="page-link" tabindex="0" style="cursor: pointer;">3</a></li>
+                    <li class="page-item">
+                        <a class="page-link" style="cursor: pointer;" tabindex="0">
+                            <span class="visually-hidden">next page</span>
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-right" /></svg>
+                        </a>
+                    </li>
+                </ul>
+                <div class="form-group">
+                    <input type="text" id="jumpToPage-test-pagination" inputmode="numeric" pattern="[0-9]*" name="jumpToPageValue" class="form-control" value="">
+                    <label for="jumpToPage-test-pagination" class="">
+                        <span aria-hidden="true">go to page...</span>
+                        <span class="visually-hidden">set the destination page</span>
+                    </label>
+                </div>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitPagination_Should_Render_Simple_Mode_Correctly()
+    {
+        var currentPage = 1;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="5"
+                            @bind-Page="currentPage"
+                            Description="Page navigation in simple mode"
+                            ViewMode="PaginationViewMode.Simple">
+            </BitPagination>);
+
+        component.MarkupMatches(
+            @<nav class="pagination-wrapper" aria-label="Page navigation in simple mode">
+                <ul class="pagination">
+                    <li class="page-item disabled">
+                        <a class="page-link" tabindex="-1" aria-hidden="true" style="cursor: pointer;">
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-left" /></svg>
+                            <span class="visually-hidden">previous page</span>
+                        </a>
+                    </li>
+                    <li class="page-item"><span class="page-link" aria-current="page">1</span></li>
+                    <li class="page-item"><span class="page-link">/</span></li>
+                    <li class="page-item"><span class="page-link">5</span></li>
+                    <li class="page-item visually-hidden">
+                        <a class="page-link" href="#" aria-current="page">page 1 of 5</a>
+                    </li>
+                    <li class="page-item">
+                        <a class="page-link" style="cursor: pointer;" tabindex="0">
+                            <span class="visually-hidden">next page</span>
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-right" /></svg>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitPagination_With_PageLinkGenerator_Should_Render_Real_Hrefs_On_Middle_Page()
+    {
+        int currentPage = 2;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                            @bind-Page="@currentPage"
+                            Description="Page navigation"
+                            PageLinkGenerator="@(page => $"/items/{page}")" />);
+
+        component.MarkupMatches(
+            @<nav class="pagination-wrapper" aria-label="Page navigation">
+                <ul class="pagination">
+                    <li class="page-item">
+                        <a class="page-link" href="/items/1">
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-left" /></svg>
+                            <span class="visually-hidden">previous page</span>
+                        </a>
+                    </li>
+                    <li class="page-item"><a class="page-link" href="/items/1">1</a></li>
+                    <li class="page-item"><a class="page-link" aria-current="page" href="/items/2">2</a></li>
+                    <li class="page-item"><a class="page-link" href="/items/3">3</a></li>
+                    <li class="page-item">
+                        <a class="page-link" href="/items/3">
+                            <span class="visually-hidden">next page</span>
+                            <svg class="icon icon-primary"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-chevron-right" /></svg>
+                        </a>
+                    </li>
+                </ul>
+            </nav>);
+    }
+
+    [Fact]
+    public void BitPagination_With_PageLinkGenerator_On_First_Page_Should_Not_Generate_Href_For_Prev_Link()
+    {
+        int currentPage = 1;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                            @bind-Page="@currentPage"
+                            Description="Page navigation"
+                            PageLinkGenerator="@(page => $"/items/{page}")" />);
+
+        var prevLink = component.FindAll(".page-item > .page-link").First();
+        Assert.Null(prevLink.GetAttribute("href"));
+
+        var nextLink = component.FindAll(".page-item > .page-link").Last();
+        Assert.Equal("/items/2", nextLink.GetAttribute("href"));
+    }
+
+    [Fact]
+    public void BitPagination_With_PageLinkGenerator_On_Last_Page_Should_Not_Generate_Href_For_Next_Link()
+    {
+        int currentPage = 3;
+
+        var component = Render(
+            @<BitPagination NumberOfPages="3"
+                            @bind-Page="@currentPage"
+                            Description="Page navigation"
+                            PageLinkGenerator="@(page => $"/items/{page}")" />);
+
+        var prevLink = component.FindAll(".page-item > .page-link").First();
+        Assert.Equal("/items/2", prevLink.GetAttribute("href"));
+
+        var nextLink = component.FindAll(".page-item > .page-link").Last();
+        Assert.Null(nextLink.GetAttribute("href"));
+    }
+}