Skip to content
Breakdance Extended
Get the plugin
← All modules
New
Element Since v0.7.0

Timeline

Vertical, alternating or horizontal timelines as a real ordered list, with optional scroll progress.

Topics: Accessibility · Content

Highlights

Three layouts with a fallback breakpoint
Machine-readable dates with time
Images, icons and links per entry
Scroll progress fills the line
Keyboard-scrollable horizontal mode

Accessibility

Built as an ordered list, horizontal mode is a focusable scroll region with optional previous/next buttons.

Privacy

No external requests. The script only loads when progress or navigation buttons are used.

Live demo

See it in action

Everything below is the real element, configured in Breakdance. Try it with your keyboard, zoom in, or open the page on your phone.

Variant 1

Vertical with scroll progress

The line fills up to the middle of the screen while you scroll, reached entries get the accent marker. Dates are machine readable, the whole timeline is an ordered list.

  1. Kick-off and audit

    We review the current site, list every third-party request and run an accessibility check on the key templates.

  2. Design system

    Colors, type scale and spacing go into Breakdance global settings and design presets, so editors only pick from approved styles.

  3. Build

    Templates, pages and dynamic content are built with native elements. Maps, videos and reviews use the privacy-first modules.

  4. Review and testing

    Keyboard, screen reader and mobile tests, plus a final scan for external requests before launch.

  5. Launch

    Go live, hand over documentation and train the client team in a one-hour session.

Variant 2

Alternating with images

Entries alternate left and right on large screens and fall back to a single column on tablets. Images use the regular media library sizes.

  1. Minimalist building facade against a dark sky

    Concrete and glass

    Brutalist office blocks define the skyline of the inner city.

  2. Dark modern facade with geometric pattern

    The night shift

    Neon facades turn the harbor district into a landmark after dark.

  3. Building exterior with minimalist panels and subtle light

    Panels and light

    Minimal panel facades with integrated lighting become the new standard.

  4. Sunlight falling through a concrete opening

    Quiet geometry

    Restored buildings mix sharp lines with daylight and open courtyards.

Variant 3

Horizontal with navigation buttons

A keyboard-scrollable region with previous and next buttons. Below 1024 pixels it turns into a vertical list.

  1. First public version

    Leaflet Maps, Video, Gallery, Google Place Rating and more.

  2. New settings page

    React settings, module registry, German translation, GPL license.

  3. Data and privacy

    Table, Timeline, Image Hotspots, Testimonials, Local Fonts.

  4. Forms

    Turnstile, GDPR checkbox and retention periods for submissions.

  5. Stable release

    Public launch with licenses and automatic updates.

More modules

All modules