Skip to content
Snippets Groups Projects
Select Git revision
  • 2.1.x default
  • 7.x-1.x
  • 2.0.x
  • 8.x-1.x
  • 2.1.1
  • 2.1.0
  • 2.0.3
  • 2.0.2
  • 2.0.1
  • 2.0.0
  • 8.x-1.0-beta3
  • 8.x-1.x-beta3
  • 8.x-1.0-beta2
  • 8.x-1.0-beta1
  • 7.x-1.5
  • 8.x-1.0-alpha1
  • 7.x-1.4
  • 7.x-1.3
  • 7.x-1.2
  • 7.x-1.1
  • 7.x-1.0
  • 7.x-1.0-beta4
  • 7.x-1.0-beta3
  • 7.x-1.0-beta2
24 results
Compare
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Name Last commit Last update
..
css
src/Plugin/Block
templates
README.md
timeline_block.info.yml
timeline_block.libraries.yml
timeline_block.module
README.md

Timeline Block

The Timeline Block module is a flexible solution for creating and displaying interactive timelines in Drupal 10 and 11. It enables site administrators to build timelines directly from the block configuration interface—ideal for showcasing events, milestones, or phased processes.

With 10 predefined layouts, manual sorting using weight fields, and full customization capabilities via Twig, CSS, and JavaScript, this module offers both ease of use and creative freedom. Whether for historical records, project roadmaps, or any time-ordered data, Timeline Block provides a powerful visual presentation layer.

For a full description of the module, visit the
project page.

Submit bug reports and feature suggestions, or track changes in the
issue queue.

Table of contents

  • Requirements
  • Installation
  • Configuration
  • Customization
  • Troubleshooting
  • Maintainers

Requirements

This module requires no contributed modules outside of Drupal core.

Installation

Install as you would normally install a contributed Drupal module. For more information, see Installing Drupal Modules.

If using Composer:

composer require drupal/timeline_block

Enable the module using Drush:

drush en timeline_block

Configuration

  1. Go to: Structure → Block layout → Place block
  2. Place a Timeline Block in the desired region.
  3. In the block configuration form:
    • Enter Timeline Items including time, title, and description.
    • Choose one of the 10 predefined layouts.
    • Set item weights to manually sort the timeline.
  4. Save the block configuration.

The timeline will render immediately using your chosen layout and data.

Customization

  • Override the default Twig template: timeline-block.html.twig located in templates/.
  • Apply custom CSS classes for personalized styling.
  • Integrate JavaScript for advanced features such as sliders, animations, or interactivity.

Use standard Drupal theming practices to override templates and libraries via your theme or a custom module.

Troubleshooting

  • Ensure blocks are placed in active regions with visible content.
  • Check sorting weights if the timeline items are out of order.
  • Inspect theme overrides and custom CSS if the layout doesn't display as expected.

Maintainers