Home
Previous componentNext component

Jump bar

Open in fibo's StorybookOpen in Figma

A jump bar takes people somewhere else in a conversation: up to the messages they haven't read, down to ones that arrived while they were scrolled up, or back to the present from history. Counts stop at 99+ on screen, with the full number after them for screen readers.

Unread messages aboveJump up to the first unread message, or mark the conversation read.

Examples

New messages belowA pill over the bottom of the conversation, for messages that arrived while people were scrolled up.
Over 99The count stops at 99+ on screen. The button's name keeps those words and adds the full number, “99+ new messages (128)”, so speech input can still say what's on screen.
You're viewing older messages
Viewing historyFor when people have scrolled far from the present.
Ana RuizMorning. Status tokens are up for review.
Ben OkaforLooking now.
Ben OkaforWarning reads a bit dark on cards.
Ana RuizIt's the 700 step so it clears AA at badge size.
YouMakes sense to me.
Ben OkaforFine by me too.
Ana RuizNext up: the chat timeline.
Ana RuizTyping indicator is in review.
Ben OkaforMessage list after that?
Ana RuizYes, stacked on it.
YouI'll take the jump bar.
Ben OkaforDoes the divider move as you read?
YouNo, it stays where it was when you opened the channel.
Ana RuizLike Discord's red line.
Ben OkaforAnd Esc marks it read?
YouEsc, sending a message, or the button.
Ana RuizLunch?
Ben OkaforTen minutes.
Ana RuizPushed the divider styles.
Ben OkaforThe New label is a nice touch.
Ana RuizColour alone wasn't enough.
Ben OkaforChecked it in dark mode too.
Ana RuizMerging after the review.
Ben OkaforShip it.
In a timelineA message list with an unread divider, both bars, a typing indicator and a composer. Scroll up and use “Ben sends a message” to see the pill. Escape on a message or in the composer marks the conversation read.

Anatomy

A positioned root that holds plain buttons. Unread above is a bar across the top with a jump button and "Mark as read"; new below is a single pill; history is a bar across the bottom with a line of text and "Jump to present".

  1. Jump button
  2. Mark as read
  3. Bar
The unread barTwelve unread messages since 3:42.

Guidelines

  • 01Show unread-above while the unread divider is above the view, and hide it once people scroll past it or mark the conversation read.
  • 02Show new-below when messages arrive while people are scrolled up. When they're at the bottom, scroll to the new message instead.
  • 03Show history when the newest messages aren't on screen, or aren't loaded, and nothing new has arrived.
  • 04Sending a message always scrolls to the bottom and clears the unread marker.
  • 05Count a message as read only when the window has focus and the message is on screen.

Best practices

DoSay how many messages are waiting.
Don'tDon't hide the count. People decide whether to jump by how much they missed.

Accessibility

  • 01Every bar is plain buttons, reachable by Tab. A capped count keeps its visible words in the name and adds the full number after them (WCAG 2.5.3).
  • 02Move focus when a jump happens: to the first unread message, or to the newest message. jumpTo does this. Never leave focus on a button whose bar has just disappeared; after Mark as read, move it to the composer.
  • 03jumpTo scrolls instantly under reduced motion, and for any jump longer than three screens.
  • 04The unread divider itself carries a “New” label, so the marker isn't colour alone.

References