Timeline Outline Navigation
React Chrono includes an outline feature that allows users to quickly navigate to specific items within the timeline. This is particularly useful for long timelines with many events.
The outline functionality is supported in VERTICAL
and VERTICAL_ALTERNATING
modes. When enabled, an outline button appears in the top-left corner of the timeline (or top-right if the layout is flipped). Clicking this button reveals a popover menu listing all timeline items.
Enabling the Outline
To activate the outline feature, add the enableOutline
prop to your <Chrono>
component and set it to true
.
import React from "react";
import { Chrono } from "react-chrono";
const events = [
{
title: "Event 1 - January",
cardTitle: "Planning Phase",
cardSubtitle: "January 1, 2023",
},
{
title: "Event 2 - February",
cardTitle: "Development Start",
cardSubtitle: "February 1, 2023",
},
{
title: "Event 3 - March",
cardTitle: "Alpha Release",
cardSubtitle: "March 1, 2023",
},
// ... more events
];
function TimelineWithOutline() {
return (
<Chrono
items={events}
mode="VERTICAL" // Or VERTICAL_ALTERNATING
enableOutline={true} // Enable the outline feature
/>
);
}
export default TimelineWithOutline;
Note
The outline functionality is only supported in VERTICAL
and VERTICAL_ALTERNATING
modes. If enableOutline
is used with the HORIZONTAL
mode, it will be ignored, and no outline button will be displayed.
Using the Popover Menu
Once enabled, the outline button (often a hamburger icon or similar) will be visible.
- Clicking the button: Opens a popover menu.
- Popover Content: The menu lists all timeline items, typically using their
title
property. The currently active/visible item in the timeline is usually highlighted in the popover. - Navigation: Clicking on an item in the popover menu will smoothly scroll the timeline to that specific item.
The outline feature significantly improves navigation for extensive timelines, providing users with a quick overview and direct access to any event.