Gantt Timeline
A two-pane view with a left task list and a right horizontal timeline of bars representing task duration, dependencies, and progress. Used for project planning where dependencies and overlap matter.
$ prime install @community/pattern-gantt-timeline Projection
Always in _index.xml · the agent never has to ask for this.
GanttTimeline [pattern] v1.0.0
A two-pane view with a left task list and a right horizontal timeline of bars representing task duration, dependencies, and progress. Used for project planning where dependencies and overlap matter.
Loaded when retrieval picks the atom as adjacent / supporting.
GanttTimeline [pattern] v1.0.0
A two-pane view with a left task list and a right horizontal timeline of bars representing task duration, dependencies, and progress. Used for project planning where dependencies and overlap matter.
Facts
Label
Gantt Timeline
Problem
Lists hide duration, parallel work, and dependencies. Stakeholders need to see when work happens, how it overlaps, and which tasks block which.
Solution
Show tasks as rows; each row has a left label (task name + dates) and a right bar positioned along a time axis. Dependency arrows connect predecessor end to successor start. Drag bars to reschedule; drag edges to resize.
Structure
<section aria-label="Project Gantt">
<header class="gantt-toolbar">
<h2>Q2 Roadmap</h2>
<div role="tablist" aria-label="Zoom">
<button role="tab" aria-selected="false">Day</button>
<button role="tab" aria-selected="true">Week</button>
<button role="tab" aria-selected="false">Month</button>
</div>
</header>
<div class="gantt" role="grid" aria-label="Tasks and timeline">
<div class="gantt-list" role="rowgroup">
<div role="row">
<span role="rowheader">Design system v2</span>
<span class="dates">Apr 1 - Apr 28</span>
</div>
</div>
<div class="gantt-axis" role="row" aria-label="Weeks">
<span role="columnheader">W14</span>
<span role="columnheader">W15</span>
<span role="columnheader">W16</span>
<span role="columnheader">W17</span>
</div>
<div class="gantt-bars" role="rowgroup">
<div role="row">
<button
role="gridcell"
class="bar"
aria-label="Design system v2, Apr 1 to Apr 28, 65% complete"
style="left:0; width:60%"
>
<span class="progress" style="width:65%"></span>
<span class="title">Design system v2</span>
</button>
</div>
</div>
<svg class="dep-layer" aria-hidden="true"><!-- dependency arrows --></svg>
</div>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Drag bar body to shift task by N days; drag left edge to move start; drag right edge to extend end.
- Snap to day or week boundary depending on current zoom level.
- Today is marked with a vertical accent line spanning the timeline.
- Hover a bar to highlight its dependency chain (predecessors + successors).
- Zoom levels: Day (column = 1 day), Week (column = 1 week), Month (column = 1 month).
- Keyboard: focus a bar, Arrow Left/Right shifts by one zoom unit; Shift+Arrow resizes.
A11y
- Each bar must have an accessible name including title, start date, end date, and progress percent.
- Dependency arrows are decorative SVG with
aria-hidden='true'; convey dependencies in the bar's accessible name or details panel instead. - Use ARIA grid pattern with
role='grid'/role='row'/role='gridcell'for keyboard table semantics. - Provide a non-drag alternative (date inputs in a side panel) to reschedule tasks for keyboard and screen reader users.
- Today indicator must not rely on color alone — pair with a 'Today' label.
Loaded when retrieval picks the atom as a focal / direct hit.
GanttTimeline [pattern] v1.0.0
A two-pane view with a left task list and a right horizontal timeline of bars representing task duration, dependencies, and progress. Used for project planning where dependencies and overlap matter.
Facts
Label
Gantt Timeline
Problem
Lists hide duration, parallel work, and dependencies. Stakeholders need to see when work happens, how it overlaps, and which tasks block which.
Solution
Show tasks as rows; each row has a left label (task name + dates) and a right bar positioned along a time axis. Dependency arrows connect predecessor end to successor start. Drag bars to reschedule; drag edges to resize.
Structure
<section aria-label="Project Gantt">
<header class="gantt-toolbar">
<h2>Q2 Roadmap</h2>
<div role="tablist" aria-label="Zoom">
<button role="tab" aria-selected="false">Day</button>
<button role="tab" aria-selected="true">Week</button>
<button role="tab" aria-selected="false">Month</button>
</div>
</header>
<div class="gantt" role="grid" aria-label="Tasks and timeline">
<div class="gantt-list" role="rowgroup">
<div role="row">
<span role="rowheader">Design system v2</span>
<span class="dates">Apr 1 - Apr 28</span>
</div>
</div>
<div class="gantt-axis" role="row" aria-label="Weeks">
<span role="columnheader">W14</span>
<span role="columnheader">W15</span>
<span role="columnheader">W16</span>
<span role="columnheader">W17</span>
</div>
<div class="gantt-bars" role="rowgroup">
<div role="row">
<button
role="gridcell"
class="bar"
aria-label="Design system v2, Apr 1 to Apr 28, 65% complete"
style="left:0; width:60%"
>
<span class="progress" style="width:65%"></span>
<span class="title">Design system v2</span>
</button>
</div>
</div>
<svg class="dep-layer" aria-hidden="true"><!-- dependency arrows --></svg>
</div>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Drag bar body to shift task by N days; drag left edge to move start; drag right edge to extend end.
- Snap to day or week boundary depending on current zoom level.
- Today is marked with a vertical accent line spanning the timeline.
- Hover a bar to highlight its dependency chain (predecessors + successors).
- Zoom levels: Day (column = 1 day), Week (column = 1 week), Month (column = 1 month).
- Keyboard: focus a bar, Arrow Left/Right shifts by one zoom unit; Shift+Arrow resizes.
A11y
- Each bar must have an accessible name including title, start date, end date, and progress percent.
- Dependency arrows are decorative SVG with
aria-hidden='true'; convey dependencies in the bar's accessible name or details panel instead. - Use ARIA grid pattern with
role='grid'/role='row'/role='gridcell'for keyboard table semantics. - Provide a non-drag alternative (date inputs in a side panel) to reschedule tasks for keyboard and screen reader users.
- Today indicator must not rely on color alone — pair with a 'Today' label.
Examples
- @community/example-linear-roadmap
- @community/example-asana-timeline
Label
Gantt Timeline
Problem
Lists hide duration, parallel work, and dependencies. Stakeholders need to see when work happens, how it overlaps, and which tasks block which.
Solution
Show tasks as rows; each row has a left label (task name + dates) and a right bar positioned along a time axis. Dependency arrows connect predecessor end to successor start. Drag bars to reschedule; drag edges to resize.
Structure
<section aria-label="Project Gantt">
<header class="gantt-toolbar">
<h2>Q2 Roadmap</h2>
<div role="tablist" aria-label="Zoom">
<button role="tab" aria-selected="false">Day</button>
<button role="tab" aria-selected="true">Week</button>
<button role="tab" aria-selected="false">Month</button>
</div>
</header>
<div class="gantt" role="grid" aria-label="Tasks and timeline">
<div class="gantt-list" role="rowgroup">
<div role="row">
<span role="rowheader">Design system v2</span>
<span class="dates">Apr 1 - Apr 28</span>
</div>
</div>
<div class="gantt-axis" role="row" aria-label="Weeks">
<span role="columnheader">W14</span>
<span role="columnheader">W15</span>
<span role="columnheader">W16</span>
<span role="columnheader">W17</span>
</div>
<div class="gantt-bars" role="rowgroup">
<div role="row">
<button
role="gridcell"
class="bar"
aria-label="Design system v2, Apr 1 to Apr 28, 65% complete"
style="left:0; width:60%"
>
<span class="progress" style="width:65%"></span>
<span class="title">Design system v2</span>
</button>
</div>
</div>
<svg class="dep-layer" aria-hidden="true"><!-- dependency arrows --></svg>
</div>
</section>
Uses
- @community/method-heuristic-review
Behavior
- Drag bar body to shift task by N days; drag left edge to move start; drag right edge to extend end.
- Snap to day or week boundary depending on current zoom level.
- Today is marked with a vertical accent line spanning the timeline.
- Hover a bar to highlight its dependency chain (predecessors + successors).
- Zoom levels: Day (column = 1 day), Week (column = 1 week), Month (column = 1 month).
- Keyboard: focus a bar, Arrow Left/Right shifts by one zoom unit; Shift+Arrow resizes.
A11y
- Each bar must have an accessible name including title, start date, end date, and progress percent.
- Dependency arrows are decorative SVG with
aria-hidden='true'; convey dependencies in the bar's accessible name or details panel instead. - Use ARIA grid pattern with
role='grid'/role='row'/role='gridcell'for keyboard table semantics. - Provide a non-drag alternative (date inputs in a side panel) to reschedule tasks for keyboard and screen reader users.
- Today indicator must not rely on color alone — pair with a 'Today' label.
Compatible
- @community/pattern-data-table-dense
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-gantt-timeline/atom.yaml