What are the classes of breadcrumb in Materialize CSS ?
Last Updated :
30 May, 2023
Materialize is a modern responsive CSS framework based on Material Design by Google. Its goal is to develop a system of design that allows integrated user experience across all its services on any platform. Materialize is a design language that combines the classic principles of successful design along with innovation and technology. Materialize comes with various useful components which helps developer to create responsive websites. BreadCrumbs is one the built-in component of materialize CSS. Breadcrumb in Materialize CSS is basically used when you have multiple layers of content to display the current working location of the user on a website or web App.
Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. The following table shows the available classes and their usage.
- nav-wrapper: It basically sets the nav component as a breadcrumb or a navbar wrapper.
- breadcrumb: It is used to set the anchor element as breadcrumb. last anchor element is active, whereas the rest are shown as greyed out.
We can create breadcrumbs by using the following syntax.
Syntax:
<nav>
<div class="nav-wrapper green">
<a href="#html5" class="breadcrumb">HTML5</a>
<a href="#materialize" class="breadcrumb">Materialize</a>
<a href="#breadcrumb" class="breadcrumb">BreadCrumb</a>
</div>
</nav>
Example 1: In this example, we have created a simple breadcrumb with the current location BreadCrumb, which means you are on the BreadCrumb page and it is under Materialize category and HTML5 points HTML5 page.
HTML
<html>
<head>
<title>BreadCrumb</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<script type="text/javascript"
src=
</script>
<script src=
</script>
<style>
.container {
height: 64px;
display: flex;
align-items: center;
}
h1 {
justify-content: center;
text-align: center;
}
div {
display: flex;
align-items: center;
color: white;
background-color: green;
}
span {
font-family: Roboto;
font-weight: 300;
font-size: 20px;
color: white;
}
i {
margin: 0 8px;
}
</style>
</head>
<body>
<div class="container">
<div>
<span>HTML5</span>
<i class="material-icons">double_arrow</i>
</div>
<div>
<span>Materialize</span>
<i class="material-icons">double_arrow</i>
</div>
<div>
<span>BreadCrumb</span>
<i class="material-icons">double_arrow</i>
</div>
</div>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
Example 2: In this example, we will create a simple breadcrumb with the active current location BreadCrumb.
HTML
<html>
<head>
<title>BreadCrumb</title>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<style>
h1 {
justify-content: center;
text-align: center;
}
</style>
<script type="text/javascript"
src=
</script>
<script src=
</script>
</head>
<body class="container">
<nav>
<div class="nav-wrapper green">
<a href="#html5" class="breadcrumb">HTML5</a>
<a href="#materialize" class="breadcrumb">Materialize</a>
<a href="#breadcrumb" class="breadcrumb">BreadCrumb</a>
</div>
</nav>
<h1>GeeksForGeeks</h1>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...