Pagination

Use our pagination and breadcrumb examples to show that a series of related content exists across multiple pages and navigational hierarchy.

Default

View example's code

import Pagination from 'components/reuseable/Pagination';

<Pagination className="justify-content-start" />

Pagination - Alternative

View example's code

import Pagination from 'components/reuseable/Pagination';

<Pagination className="justify-content-start" altStyle />

Breadcrumb

View example's code

import Breadcrumb from 'components/reuseable/Breadcrumb';

<Breadcrumb data={[{ id: 1, title: 'Home', url: '#' }]} />

<Breadcrumb
  data={[{ id: 1, title: 'Home', url: '#' }, { id: 2, title: 'Library', url: '#' }]}
/>

<Breadcrumb
  className="mb-0"
  data={[
    { id: 1, title: 'Home', url: '#' },
    { id: 2, title: 'Library', url: '#' },
    { id: 3, title: 'Data', url: '#' }
  ]}
/>

Pagination Props

Name	Default	Type	Description
`className`	justify-content-center	string	Style the pagination nav with classname
`altStyle`	false	boolean	When you pass true then show alternative style

Breadcrumb Props

Name	Default	Type	Description
`className`	empty	string	Style the breadcrumb list with classname
`data`	dummy array	array	Actual breadcrumb data show in ui

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox

PROJECT PAGES

SINGLE PROJECTS

Usage

Styleguide

Elements

Pagination

Default

Pagination - Alternative

Breadcrumb

Pagination Props

Breadcrumb Props

Think unique and be creative. Make a difference with Sandbox.