Materialize CSS Breadcrumb

by Online Tutorials Library July 14, 2022

Materialize CSS BreadCrumb

Materialize CSS BreadCrumb is used to display your current location. This is usually used when you have multiple layers of content.

Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. Following is a list of available classes and their effects.

index	class name	description
1)	nav-wrapper	sets the nav component as breadcrumb/nav bar wrapper.
2)	breadcrumb	sets the anchor element as breadcrumb. last anchor element is active, while rest are shown as greyed out.

Example

  <!DOCTYPE html>  <html>     <head>        <title>The Materialize BreadCrumb Example</title>        <meta name = “viewport” content = “width = device-width, initial-scale = 1”>              <link rel = “stylesheet”           href=”https://fonts.googleapis.com/icon?family=Material+Icons”>        <link rel = “stylesheet”           href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css”>        <script type = “text/javascript”           src = “https://code.jquery.com/jquery-2.1.1.min.js”></script>                   <script src = “https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js”>        </script>      </head>          <body class = “container”>         <nav>           <div class = “nav-wrapper”>              <div class = “col s10″>                 <a href=”#” class = “breadcrumb”>tutoraspire</a>                 <a href=”#” class = “breadcrumb”>Technology</a>                 <a href=”#” class = “breadcrumb”>CSS</a>              </div>           </div>        </nav>     </body>     </html>  

Test it Now

Output:

Materialize Breadcrumb 1

Next TopicMaterialize CSS Cards

Materialize CSS Breadcrumb

Materialize CSS BreadCrumb

Example

Sticky Notes for Ubuntu

Azure Portal Overview

You may also like