Foundation Pagination

If your webpage has a lot of content, you need to use pagination functionality.

To create a basic pagination feature, you need to<ul>add to element.paginationClass:

Current page

You can<li>add.currentclass to mark the current page:

Disabled pagination

If you need to make a pagination item unclickable, you need to use.unavailableClass:

Pagination direction

In the first and last<li>add to element.arrowclass to insert HTML entity symbols«and»to create pagination direction symbols:

Pagination centered display

We can add it on the outer layer of <ul><div>element, and on<div>add to.pagination-centeredclass to implement centered pagination display:

Breadcrumb navigation

Breadcrumb navigation is used to display the navigation structure of the current page.

In<ul>add to element.breadcrumbsclass to implement breadcrumb navigation. You can add it on the <li>.currentor.unavailableclass to set the current page and non-clickable effect:

Sub navigation

On page switching, sub-navigation is very useful.

In<dl>add to element.sub-navclass to create sub-navigation. In<dt>add a title to the element, for the selected option<dd>add.activeClass: