content pagination

content pagination docs

Content Pagination

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

Published Last updated: 4.6.0 Change log 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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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 Install 
npm install @bolt/components-content-pagination
Dependencies @bolt/components-tooltip @bolt/core-v3.x @bolt/elements-icon @bolt/elements-text-link

content pagination

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
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.