Overview
Pagination 05 is a navigation component that allows users to move between pages. It displays the current page position (e.g., ‘Page 1 of 10’) alongside Previous and Next buttons with icons. The Previous button is disabled on the first page, and both buttons have hover and disabled states for clear visual feedback.
How to use
Open the Brikl panel
Navigate to the Elements category in the Brikl panel.
Copy the component
Find Pagination 05 and click Copy.
Paste into your editor
Paste it into your Bubble canvas with Cmd + V (Mac) or Ctrl + V (Windows),
or right-click on the canvas and select Paste.
States
This component includes conditional states that automatically change its appearance.
| State | Trigger | Visual effect |
|---|
| Next Button Hovered | User hovers over the Next button | Background color changes to rgba(245, 244, 244, 1) |
| Next Button Disabled | Button is not clickable (e.g., last page reached) | Next button opacity reduces to 50% |
| Previous Button Disabled | Button is not clickable (e.g., on first page) | Previous button opacity reduces to 50% |
| Mobile Breakpoint | Page width is less than the built-in mobile breakpoint | Page text font size reduces from 16px to 14px |
These states are handled natively by Bubble and require no additional setup.
They will work automatically once the component is pasted into your editor.
Responsive
This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.
Requirements
| |
|---|
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
| Platform | Supported |
|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component requires a Starter plan.
