Scroll Bar

Last edit: 2023.08.07

Scroll Bar shows the current scroll position and allows users to move the page content in a predetermined direction.

The control appears when the content is too large to be displayed entirely within the viewport. In some cases, a visible Scroll Bar can aid the speed, ease, and safety of browsing content in the automotive context.


  1. Track: The background of the Scroll Bar. It includes a background color and radius properties.
  2. Handle: A sliding element whose size and position correspond to content scrolling on a screen.
  3. Buttons: Optional, tertiary-type buttons.
  4. Indicator container: The background of the indicator. It includes a background color, stroke width and style, radius, and elevation properties.
  5. Indicator content: A label or icon that corresponds to a section in a scrollable area.


Interactive scroll barProvides users the information about the scrolling position and can optionally include buttons used as anchor points to jump somewhere in a scrollable view (for example, to get back to the top with one tap) or for incremental scrolling (for example, up and down buttons).
Interactive scroll bar with indicator overlayThe indicator communicates the exact position in a scrollable area when users directly interact with the Scroll Bar handle.


usage example1 thumbnail

Contacts in Communication

Scroll Bar with up and down buttons and indicator.

usage example2 thumbnail

Songs grid in Entertainment

Scroll Bar with up and down buttons.


ThemingThe sizings of the Scroll Bar width, margins, buttons paddings, track, handle, indicator container and content can be adjusted. Additionally, it is possible to change the styling of the track, handle, indicator container and content, and buttons.
ConfigurationsInteractive Scroll Bars can configure the number and type of buttons to show.
ContentButtons, track, handle, and indicator assets can be replaced.