className
string
(optional)

Class name for the top level <ul> container

Defaults to pagination, overrides extraClassName prop (below)

extraClassName
string
(optional)

Useful when using Bootstrap styles, extra classNames to be added to the top level <ul> container. Use this prop to override the default justify value - for example to align elements to the start of the page use: justify-content-start

Defaults to justify-content-center, not applicable if className prop is set

pageItemClassName
string
(optional)

Class name for all the <li> elements

Defaults to page-item

pageLinkClassName
string
(optional)

Class name for <a> or <span> child elements within an <li> element:

<li ...><a class='page-link'>1</a></li>

Defaults to page-link

activeItemClassName
string
(optional)

Appended to <li> class name for the active element:

<li class='page-item active'><a class='page-link'>1</a></li>

Defaults to active

disabledItemClassName
string
(optional)

Appended to <li> class name for non-clickable elements (disabled nav buttons and the break/ellipsis):

<li class='page-item disabled'><span class='page-link'>...</span></li>

Defaults to disabled

string
(optional)

Appended to <li> class name for nav items (« / » buttons)

Setting to 'my-nav' would give html similar to:

<li class='page-item my-nav'><span class='page-link'>«</span></li>

By default will not be output

previousClassName
string
(optional)

Appended to <li> class name for the previous button («)

Setting to 'my-previous-button' would give html similar to:

<li class='page-item my-previous-button'><span class='page-link'>«</span></li>

Overrides navClassName and by default will not be output

nextClassName
string
(optional)

Appended to <li> class name for the next button (»)

Setting to 'my-next-button' would give html similar to:

<li class='page-item my-next-button'><span class='page-link'>»</span></li>

Overrides navClassName and by default will not be output