content pagination

Content Pagination

A UI element that helps the user navigate to previous, next, and parent page.

Published

Last updated: 4.7.0

Github

NPM

Twig Usage

{% include '@bolt-components-content-pagination/content-pagination.twig' with {
  parent: {
    content: 'System Administrations',
    tooltip_content: 'Parent topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  previous: {
    content: 'Configuring system settings',
    tooltip_content: 'Previous topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  next: {
    content: 'Configuring user avatar',
    tooltip_content: 'Next topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
} only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the parent element.	`object`	—	—
parent	Set the parent page link.	`object`	—	`content` Text content of the link. — `tooltip_content` Text content of the tooltip. — `link_attributes` A Drupal attributes object. Applies extra HTML attributes to the link element. —
previous	Set the previous page link.	`object`	—	`content` Text content of the link. — `tooltip_content` Text content of the tooltip. — `link_attributes` A Drupal attributes object. Applies extra HTML attributes to the link element. —
next	Set the next page link.	`object`	—	`content` Text content of the link. — `tooltip_content` Text content of the tooltip. — `link_attributes` A Drupal attributes object. Applies extra HTML attributes to the link element. —

Install

npm install @bolt/components-content-pagination

Dependencies

@bolt/components-tooltip

@bolt/core-v3.x

@bolt/elements-icon

@bolt/elements-text-link

Basic Content Pagination

Content Pagination is commonly used in documentation design. It appears at the bottom of an article to help the user navigate to previous, next, or parent topic.

Demo

System Administrations Parent topic
Configuring system settings Previous topic
Configuring user avatar Next topic

Twig

{% include '@bolt-components-content-pagination/content-pagination.twig' with {
  parent: {
    content: 'System Administrations',
    tooltip_content: 'Parent topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  previous: {
    content: 'Configuring system settings',
    tooltip_content: 'Previous topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
  next: {
    content: 'Configuring user avatar',
    tooltip_content: 'Next topic',
    link_attributes: {
      href: 'https://google.com',
    },
  },
} only %}

HTML

Not available in plain HTML. Please use Twig.

content pagination

content pagination docs Show Code Hide Code

Content Pagination

A UI element that helps the user navigate to previous, next, and parent page.

content pagination Show Code Hide Code

content pagination docs

content pagination