CSS Pagination

Last updated: 10 days ago

Pagination is not packaged as a component because different systems use pagination in various ways. Designing pagination with native HTML and CSS allows flexible combination of pagination elements for...

CSS Pagination10 days ago

Simple Usage

Wrap with _pagination class. Use:

selected attribute for current page
rep=total for total pages count
rep=prev for previous page
rep=next for next page
rep=first for first page
rep=last for last page

By default centered. Combine with:

align=start for left alignment
align=end for right alignment

Output
HTML

Total 142 items First Previous 1 2 3 4 5 6 Next Last

Total 142 items First Previous 1 2 3 4 5 6 Next Last

Total 142 items First Previous 1 2 3 4 5 6 Next Last
```
                
                
            
```

Multiple Variations

Navigation icons can be:

Plain text
Special characters
Font icons

Output
HTML

Total 142 items First Previous 1 2 3...4 5 6 Next Last

Total 142 items «First ‹Previous 1 2 3...4 5 6 Next›Last»

«‹1 2 3...4 5 6 ›»

1 2 3...4 5 6

«‹1 2 3...4 5 6 ›»

⇤←1 2 3...4 5 6 →⇥

Total200records, current page8 First Previous Next Last
```
                
                
            
```

Using Form Fields

Pagination often includes page jump and items per page selection, which may require select and input fields.

Default pagination height (32px) is smaller than form fields (40px), so use CSS variables to align them.

Output
HTML

Per pageitems First Previous 1 2 3...4 5 6 Next Last Total 142 items, go topage
```
                
                
            
```

We typically use the framework's custom form fields for items per page and page jump.

Output
HTML

First Previous 1 2 3...4 5 6 Next Last
```
                
                
            
```

Sizes

Default pagination height is 32px. Set size with:

size=sm: 24px height
size=md: 32px height (default)
size=lg: 40px height (matches default form field height)

Output
HTML

  First Previous 1 2 3...4 5 6 Next Last

  First Previous 1 2 3...4 5 6 Next Last

  First Previous 1 2 3...4 5 6 Next Last
```
                
                
            
```

Button Group Style

Standard structure includes:

rep=main: Contains page numbers and all navigation buttons
rep=pages: Contains only page numbers

Add type=group attribute to implement button group style.

Output
HTML

«‹1 2 3...4 5 6 ›»

«‹1 2 3...4 5 6 ›»
2/8

‹›

«‹›»
```
                
                
            
```

Minimalist Style

Use type=plain attribute for simplest minimalist style. This removes borders from navigation buttons and page numbers.

Output
HTML

«‹1 2 3...4 5 6 ›»
```
                
                
            
```

Special Characters

When using special characters in pagination, add _char class to increase their font size since default size is small.

Output
HTML

‹›

«‹1 2 3...4 5 6 ›»
```
                
                
            
```