Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are the classes of breadcrumb in Materialize CSS?
Materialize CSS breadcrumbs are navigation components that help users understand their current location within a website's hierarchy. The framework provides specific CSS classes to create clean, responsive breadcrumb navigation with material design principles.
Syntax
<nav>
<div class="nav-wrapper">
<a href="#" class="breadcrumb">First Level</a>
<a href="#" class="breadcrumb">Second Level</a>
<a href="#" class="breadcrumb">Current Page</a>
</div>
</nav>
Classes of Breadcrumb in Materialize CSS
The main CSS classes used to create breadcrumbs in Materialize CSS are
breadcrumb class Applied to anchor tags to style them as breadcrumb items. The last breadcrumb automatically appears active while previous ones are grayed out.
nav-wrapper class Container class that sets up the navigation component for breadcrumb styling and proper spacing.
Example: Basic Breadcrumb Navigation
The following example demonstrates a simple breadcrumb navigation using Materialize CSS classes
<!DOCTYPE html>
<html>
<head>
<title>Materialize Breadcrumb Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper blue">
<div class="col s12">
<a href="#!" class="breadcrumb">Home</a>
<a href="#!" class="breadcrumb">Products</a>
<a href="#!" class="breadcrumb">Electronics</a>
<a href="#!" class="breadcrumb">Smartphones</a>
</div>
</div>
</nav>
</body>
</html>
A blue navigation bar with breadcrumb links appears. The links are separated by arrow symbols, with "Smartphones" appearing as the active (current) breadcrumb item.
Example: Colored Breadcrumb with Custom Styling
This example shows how to customize breadcrumb appearance with different colors
<!DOCTYPE html>
<html>
<head>
<title>Custom Breadcrumb Styling</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav class="teal darken-2">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">Dashboard</a>
<a href="#!" class="breadcrumb">Settings</a>
<a href="#!" class="breadcrumb">Profile</a>
</div>
</div>
</nav>
<nav class="red lighten-1" style="margin-top: 20px;">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">Admin</a>
<a href="#!" class="breadcrumb">Users</a>
<a href="#!" class="breadcrumb">Edit User</a>
</div>
</div>
</nav>
</body>
</html>
Two breadcrumb navigation bars appear - one with teal background and another with red background. Each shows a hierarchical navigation path with the last item highlighted as the current page.
Installation: To use Materialize CSS, include the CDN link in your HTML head section:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Key Features
Materialize breadcrumbs automatically handle
- Arrow separators between breadcrumb items
- Active state styling for the current page
- Responsive design that works on mobile devices
- Integration with Materialize color classes
Conclusion
Materialize CSS breadcrumbs provide an easy way to implement navigation hierarchy using the breadcrumb and nav-wrapper classes. The framework automatically handles styling and separators, making it simple to create professional-looking navigation paths.
261 Views
