Docs
Scroll Menu
Scroll Menu
A horizontally scrollable menu.
Installation
Usage
import { ScrollMenu } from "@/components/ui/scroll-menu";<ScrollMenu
scrollAmount={150}
showScrollButtons={true}
leftButtonLabel="Previous items"
rightButtonLabel="More items"
>
{/* Your scrollable menu items */}
<Button variant="secondary" className="mx-1">
Item 1
</Button>
<Button variant="secondary" className="mx-1">
Item 2
</Button>
<Button variant="secondary" className="mx-1">
Item 3
</Button>
{/* ...more items */}
</ScrollMenu>Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | The class name to apply to the component. |
children | ReactNode | - | The content to display in the component. |
leftButtonLabel | string | "Scroll left" | Accessible label for the left scroll button. |
rightButtonLabel | string | "Scroll right" | Accessible label for the right scroll button. |
scrollAmount | number | 200 | Amount to scroll horizontally when buttons are clicked. |
showScrollButtons | boolean | true | Whether to show the scroll buttons. |