Semantic-UI Menu Pagination Type
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.
The Menu is a component that displays a group of items that serve as navigation between one section of the website to another. It is an essential component and is always present in any website in order to make the navigation easy for the user.
Semantic UI Menu offers us so much Type as Menu, Secondary Menu, Tabular, Pointing, Text, Vertical Menu, Pagination. In this article, we will learn about pagination Menu Type along with examples.
Semantic UI Menu Pagination Type Class:
- pagination: This class is used to format a pagination menu to present links to pages of content.
Syntax:
<div class="ui pagination menu">
<a class="active item">
...
</a>
...
</div>
Example 1: Below example demonstrates the use of Semantic UI Menu Pagination Type.
HTML
<html> <head> <link rel="stylesheet" href= </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic UI Menu Pagination Type </h3> <div class="ui pagination menu"> <a class="active item"> a </a> <a class="item"> b </a> <a class="item"> c </a> <div class="disabled item"> ...... </div> <a class="item"> y </a> <a class="item"> z </a> </div> </center> </body> </html> |
Output:
Semantic UI Menu Pagination Type.
Example 2: Below is another example that demonstrates the use of Semantic UI Menu Pagination Type.
HTML
<html> <head> <link rel="stylesheet" href= </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic UI Menu Pagination Type </h3> <div class="ui pagination menu"> <a class="item"> 1 </a> <a class="item"> 2 </a> <a class="active item"> 3 </a> <a class="item"> 4 </a> <a class="item"> 5 </a> </div> </center> </body> </html> |
Output:
Semantic UI Menu Pagination Type.
Reference: https://semantic-ui.com/collections/menu.html#pagination
Please Login to comment...