Sandbox - Modern & Multipurpose NextJS Template

Default

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

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.