Zur NavigationZum InhaltKontaktMenuFind componentOverview Web (Legacy)PrinciplesFoundationAccessibilityDesign SystemGuidelinesDeutschFrançaisItalianoEnglishOur design principlesUser-centredRecognisableInclusiveReducedHolisticSelf-explanatoryTask-orientedAppropriateSBB Brand portalLogoDigital clockRights of useBase colorsFunctional colorsOff brand colorsIconsTimetable iconsPictogramsAbout accessibilityÜber diesen GuideContactFurther informationProduct OwnerUser ResearchInteraction DesignVisual DesignDevelopmentContent DesignTestingWhat is a design system?DesigningCodingFAQHelpProcessContributionContactOverviewBaseComponentsOverviewReleasesDesign TokensKomponentenOverviewBaseInformationenOverviewBaseComponentsSense & PurposeCommunity AssetsInstructionsPower-AppsDigital banner adsSAP Design GuidelinesApp IconsPagination Overview
What does the component do?
It scrolls through a list of elements or pages.
When should the component be used?
For long lists of elements or pages.
Rules
The number of elements per page must be defined on a context-specific base.
States and variants
Variants
Numbers
The component has the following states:
First
Middle
Last
Hover
* A maximum of five page numbers are shown.{.lead} * Keyboard operation:{.lead} * The active page cannot be jumped to.{.lead} * Tab sequence: Arrow back, first page that can be jumped to, next page that can be jumped to etc., arrow forward.{.lead} * The abbreviated form ‘…’ for hidden pages cannot be jumped to.{.lead}
Page names
This variant has the following states:
Default
Hover
* Can contain ‘forward’ and ‘back’ link, or optionally just ‘forward’ or ‘back’ (when the first or last page is active).{.lead} * The pagination links with the title of the page to be jumped to are labelled.{.lead} * The link text has a maximum width in line with the layout. Longer texts are cut using ‘…’.{.lead}