The pagination component consists of several elements:
pagination-previous
and pagination-next
for incremental navigation
pagination-list
which displays page items:
pagination-link
for the page numbers
pagination-ellipsis
for range separators
All elements are optional so you can compose your pagination as you wish.
<nav class= "pagination" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li>
<a class= "pagination-link" aria-label= "Goto page 1" > 1</a>
</li>
<li>
<span class= "pagination-ellipsis" > … </span>
</li>
<li>
<a class= "pagination-link" aria-label= "Goto page 45" > 45</a>
</li>
<li>
<a class= "pagination-link is-current" aria-label= "Page 46" aria-current= "page" > 46</a>
</li>
<li>
<a class= "pagination-link" aria-label= "Goto page 47" > 47</a>
</li>
<li>
<span class= "pagination-ellipsis" > … </span>
</li>
<li>
<a class= "pagination-link" aria-label= "Goto page 86" > 86</a>
</li>
</ul>
</nav>
You can disable some links if they are not active, or change the amount of page numbers available.
<nav class= "pagination" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" title= "This is the first page" disabled > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li>
<a class= "pagination-link is-current" aria-label= "Page 1" aria-current= "page" > 1</a>
</li>
<li>
<a class= "pagination-link" aria-label= "Goto page 2" > 2</a>
</li>
<li>
<a class= "pagination-link" aria-label= "Goto page 3" > 3</a>
</li>
</ul>
</nav>
By default on tablet , the list is located on the left, and the previous/next buttons on the right. But you can change the order of these elements by using the is-centered
and is-right
modifiers.
<nav class= "pagination is-centered" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li><a class= "pagination-link" aria-label= "Goto page 1" > 1</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 45" > 45</a></li>
<li><a class= "pagination-link is-current" aria-label= "Page 46" aria-current= "page" > 46</a></li>
<li><a class= "pagination-link" aria-label= "Goto page 47" > 47</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 86" > 86</a></li>
</ul>
</nav>
<nav class= "pagination is-right" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li><a class= "pagination-link" aria-label= "Goto page 1" > 1</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 45" > 45</a></li>
<li><a class= "pagination-link is-current" aria-label= "Page 46" aria-current= "page" > 46</a></li>
<li><a class= "pagination-link" aria-label= "Goto page 47" > 47</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 86" > 86</a></li>
</ul>
</nav>
Styles
#
Since
0.6.2
Add the is-rounded
modifier to have rounded pagination items.
<nav class= "pagination is-rounded" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li><a class= "pagination-link" aria-label= "Goto page 1" > 1</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 45" > 45</a></li>
<li><a class= "pagination-link is-current" aria-label= "Page 46" aria-current= "page" > 46</a></li>
<li><a class= "pagination-link" aria-label= "Goto page 47" > 47</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 86" > 86</a></li>
</ul>
</nav>
Sizes
#
The pagination comes in 3 additional sizes .
You only need to append the modifier is-small
, is-medium
, or is-large
to the pagination
component.
<nav class= "pagination is-small" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li><a class= "pagination-link" aria-label= "Goto page 1" > 1</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 45" > 45</a></li>
<li><a class= "pagination-link is-current" aria-label= "Page 46" aria-current= "page" > 46</a></li>
<li><a class= "pagination-link" aria-label= "Goto page 47" > 47</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 86" > 86</a></li>
</ul>
</nav>
<nav class= "pagination is-medium" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li><a class= "pagination-link" aria-label= "Goto page 1" > 1</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 45" > 45</a></li>
<li><a class= "pagination-link is-current" aria-label= "Page 46" aria-current= "page" > 46</a></li>
<li><a class= "pagination-link" aria-label= "Goto page 47" > 47</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 86" > 86</a></li>
</ul>
</nav>
<nav class= "pagination is-large" role= "navigation" aria-label= "pagination" >
<a class= "pagination-previous" > Previous</a>
<a class= "pagination-next" > Next page</a>
<ul class= "pagination-list" >
<li><a class= "pagination-link" aria-label= "Goto page 1" > 1</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 45" > 45</a></li>
<li><a class= "pagination-link is-current" aria-label= "Page 46" aria-current= "page" > 46</a></li>
<li><a class= "pagination-link" aria-label= "Goto page 47" > 47</a></li>
<li><span class= "pagination-ellipsis" > … </span></li>
<li><a class= "pagination-link" aria-label= "Goto page 86" > 86</a></li>
</ul>
</nav>
Variables
#
You can use
these variables
to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how .
Name
Type
Default value
Computed value
Name
Type
Default value
Computed value
$pagination-color
color
$text-strong
hsl(0, 0%, 21%)
$pagination-border-color
color
$border
hsl(0, 0%, 86%)
$pagination-margin
size
-0.25rem
$pagination-min-width
variable
$control-height
$pagination-item-font-size
size
1em
$pagination-item-margin
size
0.25rem
$pagination-item-padding-left
size
0.5em
$pagination-item-padding-right
size
0.5em
$pagination-hover-color
color
$link-hover
hsl(0, 0%, 21%)
$pagination-hover-border-color
color
$link-hover-border
hsl(0, 0%, 71%)
$pagination-focus-color
color
$link-focus
hsl(0, 0%, 21%)
$pagination-focus-border-color
color
$link-focus-border
hsl(217, 71%, 53%)
$pagination-active-color
color
$link-active
hsl(0, 0%, 21%)
$pagination-active-border-color
color
$link-active-border
hsl(0, 0%, 29%)
$pagination-disabled-color
color
$text-light
hsl(0, 0%, 48%)
$pagination-disabled-background-color
color
$border
hsl(0, 0%, 86%)
$pagination-disabled-border-color
color
$border
hsl(0, 0%, 86%)
$pagination-current-color
color
$link-invert
#fff
$pagination-current-background-color
color
$link
hsl(217, 71%, 53%)
$pagination-current-border-color
color
$link
hsl(217, 71%, 53%)
$pagination-ellipsis-color
color
$grey-light
hsl(0, 0%, 71%)