Related Articles

Related Articles

Materialize CSS | Pagination
  • Last Updated : 21 Jun, 2020

Pagination is used to separate the content into discrete pages that is short and easy to understand. Materialize CSS provide classes to create a pagination bar that holds the links to the other pages.

The pagination class is used to set the <ul> list element as a pagination component. The pages that have to be shown are defined inside this component as <li> items. A left and right arrow icon can be used to show the buttons for moving to the next or previous page.

Syntax:

<ul class="pagination">
  <li class="disabled">
    <a href="#!">
      <i class="material-icons">
        chevron_left
      </i>
    </a>
  </li>
  <li class="active">
    <a href="#!">1</a>
  </li>
  <li class="waves-effect">
    <a href="#!">2</a>
  </li>
  <li class="waves-effect">
    <a href="#!">3</a>
  </li>
  <li class="waves-effect">
    <a href="#!">
      <i class="material-icons">
        chevron_right
      </i>
    </a>
  </li>
</ul>

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <meta name="viewport" content=
    "width=device-width, initial-scale=1.0" />
  
    <!-- Import Material Icon Fonts -->
    <link rel="stylesheet" href=
  
    <!-- Include Compiled and minified 
        Materialize CSS -->
    <link rel="stylesheet" href=
  
    <!-- Include jQuery -->
    <script type="text/javascript" src=
    </script>
  
    <!-- Compiled and minified 
        Materialize JavaScript -->
    <script src=
    </script>
</head>
  
<body>
    <div class="card-panel">
        <h3 class="center">
            Pagination
        </h3>
  
        <!-- Use the pagination class -->
        <ul class="pagination center-align">
  
            <!-- Use icon inside list item
                for the left arrow -->
            <li class="disabled">
                <a href="#!">
                    <i class="material-icons">
                        chevron_left
                    </i>
                </a>
            </li>
  
            <!-- Various classes that can be
                used with the page links -->
            <li class="waves-effect">
                <a href="#!">1</a>
            </li>
            <li class="active green">
                <a href="#!">2</a>
            </li>
            <li class="waves-effect">
                <a href="#!">3</a>
            </li>
            <li class="waves-effect">
                <a href="#!">4</a>
            </li>
            <li class="waves-effect">
                <a href="#!">5</a>
            </li>
  
            <!-- Use icon inside list item
                for the right arrow -->
            <li class="waves-effect">
                <a href="#!">
                    <i class="material-icons">
                        chevron_right
                    </i>
                </a>
            </li>
        </ul>
    </div>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :