`<bmx-timeline-navigator>`

A strip under (or over) a bmx-timeline showing all of its time at once: how many items there are along it, and a window marking the part in view. Drag the window to move through time, drag its edges to zoom, or click anywhere to go there. Point it at the timeline with for, or put it beside a single timeline.

5 properties · 0 events · 0 methods · 3 parts

Example

The strip counts every release across five years; its window is the part the timeline shows. Drag the window, drag its edges, or click the strip. Tab to an edge and use the arrow keys (Shift moves the whole window).

Show markup

<bmx-timeline id="ex-nav-tl" time-zone="UTC" show-now="false" label="Releases over five years" style="--bmx-timeline-max-height: 14rem"></bmx-timeline>
<bmx-timeline-navigator for="ex-nav-tl" bins="120" style="margin-block-start: 0.5rem"></bmx-timeline-navigator>
<p class="note">The strip counts every release across five years; its window is the part the timeline shows. Drag the window, drag its edges, or click the strip. Tab to an edge and use the arrow keys (Shift moves the whole window).</p>

<script type="module">
  await customElements.whenDefined('bmx-timeline');
  let seed = 5;
  const rand = () => ((seed = (seed * 16807) % 2147483647) - 1) / 2147483646;
  const start = Date.UTC(2022, 0, 1);
  const items = [];
  for (let i = 0; i < 400; i++) {
    const t = start + Math.floor(rand() * 5 * 365) * 86400000;
    items.push({ id: `r${i}`, content: `Release ${Math.floor(i / 40) + 1}.${i % 40}`, start: t, group: ['Desktop', 'Web', 'Mobile'][i % 3] });
  }
  const tl = document.getElementById('ex-nav-tl');
  tl.groups = [{ id: 'Desktop', content: 'Desktop' }, { id: 'Web', content: 'Web' }, { id: 'Mobile', content: 'Mobile' }];
  tl.items = items;
  tl.setWindow('2024-01-01', '2024-04-01');
</script>

Keyboard: each edge of the window is a slider - the arrows move it a fiftieth of the strip, Page Up and Page Down a tenth, Home and End to the ends; Shift and the arrows move the whole window.

Properties

Property	Attribute	Type	Default	Description
`bins`	`bins`	`number`	`80`	How many bars the histogram has.
`endLabel`	`end-label`	`string`	`'End of the range in view'`	The end of the window in words, for its slider.
`for`	`for`	`string`	—	The id of the `bmx-timeline` to steer. Default: the only timeline beside the navigator.
`label`	`label`	`string`	`'Time range in view'`	Its accessible name.
`startLabel`	`start-label`	`string`	`'Start of the range in view'`	The start of the window in words, for its slider.

CSS shadow parts

Part	Description
`handle`	an edge of the window.
`histogram`	the bars counting items along the strip.
`window`	the part in view.

CSS custom properties

Property	Description
`--bmx-timeline-navigator-height`	How tall the strip is. Default: 3rem.