Pagination

The b.Pagination constructor creates a pagination.

Modifier	Action
`b.Centered`	Center the pagination list ("Previous" button on the left side, "Next" on the right side)
`b.Right`	Align the pagination list to the right ("Previous" and "Next" buttons on the left side)
`b.Rounded`	Have rounded pagination buttons
`b.Small`	Set size to small
`b.Medium`	Set size to medium
`b.Large`	Set size to large

Child	Action
`b.OnList(...any)`	Apply children to the `<ul class="pagination-list">` element
`b.PaginationLink(...any)`	Add button-looking link to the `<ul class="pagination-list">` element
`b.PaginationEllipsis(...any)`	Add ellipsis to the `<ul class="pagination-list">` element
Anything else	Apply child to the `<nav class="pagination">` element

The b.PaginationPrevious and b.PaginationNext constructors create button-looking links.

The b.PaginationLink and b.PaginationAHref constructors create button-looking links for the pagination list section.

Modifier	Action
`b.Current`	Mark this link as being the current page
`b.Disabled`	Mark this link as inactive

The b.PaginationEllipsis constructor creates an ellipsis for the pagination list section.

Bulma examples

Bulma documentation

Example

ResultHTML

<nav class="pagination"><ul class="pagination-list"><a class="pagination-link" aria-label="Goto page 1">1</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 45">45</a><a class="pagination-link is-current" aria-label="Goto page 46">46</a><a class="pagination-link" aria-label="Goto page 47">47</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 86">86</a></ul><a class="pagination-previous">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.PaginationPrevious("Previous"),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Goto page 1"), "1"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 45"), "45"),
	b.PaginationLink(e.AriaLabel("Goto page 46"), b.Current, "46"),
	b.PaginationLink(e.AriaLabel("Goto page 47"), "47"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 86"), "86"),
)

Example

ResultHTML

<nav class="pagination"><ul class="pagination-list"><a class="pagination-link is-current" aria-label="Page 1">1</a><a class="pagination-link" aria-label="Goto page 2">2</a><a class="pagination-link" aria-label="Goto page 3">3</a></ul><a class="pagination-previous is-disabled" title="This is the first page">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.PaginationPrevious(b.Disabled, "Previous", e.TitleAttr("This is the first page")),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Page 1"), b.Current, "1"),
	b.PaginationLink(e.AriaLabel("Goto page 2"), "2"),
	b.PaginationLink(e.AriaLabel("Goto page 3"), "3"),
)

Example

ResultHTML

<nav class="pagination is-centered"><ul class="pagination-list"><a class="pagination-link" aria-label="Goto page 1">1</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 45">45</a><a class="pagination-link is-current" aria-label="Goto page 46">46</a><a class="pagination-link" aria-label="Goto page 47">47</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 86">86</a></ul><a class="pagination-previous">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.Centered,
	b.PaginationPrevious("Previous"),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Goto page 1"), "1"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 45"), "45"),
	b.PaginationLink(e.AriaLabel("Goto page 46"), b.Current, "46"),
	b.PaginationLink(e.AriaLabel("Goto page 47"), "47"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 86"), "86"),
)

Example

ResultHTML

<nav class="pagination is-right"><ul class="pagination-list"><a class="pagination-link" aria-label="Goto page 1">1</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 45">45</a><a class="pagination-link is-current" aria-label="Goto page 46">46</a><a class="pagination-link" aria-label="Goto page 47">47</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 86">86</a></ul><a class="pagination-previous">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.Right,
	b.PaginationPrevious("Previous"),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Goto page 1"), "1"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 45"), "45"),
	b.PaginationLink(e.AriaLabel("Goto page 46"), b.Current, "46"),
	b.PaginationLink(e.AriaLabel("Goto page 47"), "47"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 86"), "86"),
)

Styles

Bulma documentation

Example

ResultHTML

<nav class="pagination is-rounded"><ul class="pagination-list"><a class="pagination-link" aria-label="Goto page 1">1</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 45">45</a><a class="pagination-link is-current" aria-label="Goto page 46">46</a><a class="pagination-link" aria-label="Goto page 47">47</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 86">86</a></ul><a class="pagination-previous">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.Rounded,
	b.PaginationPrevious("Previous"),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Goto page 1"), "1"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 45"), "45"),
	b.PaginationLink(e.AriaLabel("Goto page 46"), b.Current, "46"),
	b.PaginationLink(e.AriaLabel("Goto page 47"), "47"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 86"), "86"),
)

Sizes

Bulma documentation

Example

ResultHTML

<nav class="pagination is-small"><ul class="pagination-list"><a class="pagination-link" aria-label="Goto page 1">1</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 45">45</a><a class="pagination-link is-current" aria-label="Goto page 46">46</a><a class="pagination-link" aria-label="Goto page 47">47</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 86">86</a></ul><a class="pagination-previous">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.Small,
	b.PaginationPrevious("Previous"),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Goto page 1"), "1"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 45"), "45"),
	b.PaginationLink(e.AriaLabel("Goto page 46"), b.Current, "46"),
	b.PaginationLink(e.AriaLabel("Goto page 47"), "47"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 86"), "86"),
)

Example

ResultHTML

<nav class="pagination is-medium"><ul class="pagination-list"><a class="pagination-link" aria-label="Goto page 1">1</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 45">45</a><a class="pagination-link is-current" aria-label="Goto page 46">46</a><a class="pagination-link" aria-label="Goto page 47">47</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 86">86</a></ul><a class="pagination-previous">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.Medium,
	b.PaginationPrevious("Previous"),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Goto page 1"), "1"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 45"), "45"),
	b.PaginationLink(e.AriaLabel("Goto page 46"), b.Current, "46"),
	b.PaginationLink(e.AriaLabel("Goto page 47"), "47"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 86"), "86"),
)

Example

ResultHTML

<nav class="pagination is-large"><ul class="pagination-list"><a class="pagination-link" aria-label="Goto page 1">1</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 45">45</a><a class="pagination-link is-current" aria-label="Goto page 46">46</a><a class="pagination-link" aria-label="Goto page 47">47</a><span class="pagination-ellipsis">&hellip;</span><a class="pagination-link" aria-label="Goto page 86">86</a></ul><a class="pagination-previous">Previous</a><a class="pagination-next">Next page</a></nav>

Code

b.Pagination(
	b.Large,
	b.PaginationPrevious("Previous"),
	b.PaginationNext("Next page"),
	b.PaginationLink(e.AriaLabel("Goto page 1"), "1"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 45"), "45"),
	b.PaginationLink(e.AriaLabel("Goto page 46"), b.Current, "46"),
	b.PaginationLink(e.AriaLabel("Goto page 47"), "47"),
	b.PaginationEllipsis(),
	b.PaginationLink(e.AriaLabel("Goto page 86"), "86"),
)