JumboScrollbar

JumboScrollbar is a styled scrollable container from the @jumbo framework. It renders a div with custom scrollbar styling that matches the active MUI theme, replacing the default OS scrollbar with a thin, non-obtrusive overlay scrollbar.

Usage

Wrap any overflowing content with JumboScrollbar. It is most commonly used inside the sidebar to make the navigation list scrollable:

tsx
// src/components/Sidebar/Sidebar.tsx (excerpt)
import { JumboScrollbar } from '@jumbo/components/JumboScrollbar';
import { JumboNavbar } from '@jumbo/components/JumboNavbar';
 
export function Sidebar() {
  return (
    <JumboScrollbar
      autoHide
      autoHideDuration={200}
      style={{ height: '100%' }}
    >
      <JumboNavbar />
    </JumboScrollbar>
  );
}

Props

JumboScrollbar extends the native scrollable container with these additional props:

PropTypeDefaultDescription
autoHidebooleanfalseHides the scrollbar when not scrolling
autoHideDurationnumber200Time in ms before the scrollbar fades out
styleCSSProperties—Inline styles; set height to constrain the scroll area
classNamestring—Custom CSS class
childrenReactNoderequiredContent to scroll

Applying height constraints

JumboScrollbar needs an explicit height to activate scrolling. In the sidebar context this is handled by the parent JumboLayout calculating the available viewport height. For standalone usage, pass a height directly:

tsx
<JumboScrollbar style={{ height: 400 }}>
  <LongList items={items} />
</JumboScrollbar>

Or use a flex parent that fills available space:

tsx
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
  <Header />
  <JumboScrollbar style={{ flex: 1 }}>
    <Content />
  </JumboScrollbar>
</div>