Lets the content scroll.

This component is commonly used in applications to manage large amounts of information or data, providing a convenient way for users to explore content without overwhelming the available screen space. The children of the <Scrollable> will scroll inside the container.

By default, the width is set to 100%, you can change the width to get a horizontal scrollbar. Same you can archieve with the height property. By default this takes the available height.



To import the component you just have to use this code below.

import { Scrollable } from '@marigold/components';


widthstring | numberfullSets the width of the container. You can see allowed tokens here:
heightstringnot setSet the height of the container. You can use any pixel value.


Vertical Scrolling

This example shows the <Scrollable> container layout with some text inside of it. The height is set to 200px to enable vertical scrolling.

This is some additional text that is always visible! Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Horizontal Scrolling

Otherwise you also have the possibility to scroll horizontal, for that set the width prop to another value.

Scrollable Card

If you want to scroll inside some element for example the <Card>, you can use also the <Scrollable> inside of it.

Burger Menu

  • Crispy Chicken Burger
    • Hähnchen Filet im Crunchy Cornflakes Mantel
  • Cream Cheese Chicken Burger
    • Hähnchen Filet im Crunchy Cornflakes Mantel
    • Rucola
    • Frischkäse
  • Farmer
    • Rindfleisch
    • Bacon
    • Spiegelei

Scrollable Table Context

The example shows a <Scrollable> which contains a <Table>. This is a good example of how this layout component should be used.

My Headline

Loading data ⬇️ ......