Open In App

Blaze UI Breadcrumbs

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI Breadcrumbs is used to show the navigation route on our website. We can use these breadcrumbs when we want to show the route to the user so that the user can easily understand the flow. In this article, we will discuss Blaze UI Breadcrumbs.

Blaze UI Breadcrumbs tags:

  • blaze-breadcrumbs: This tag is used to create the breadcrumbs in Blaze UI.
  • blaze-breadcrumb: This tag is used to create a single item in the breadcrumb.

Blaze UI Breadcrumbs Classes:

  • c-breadcrumbs: This class is used to create breadcrumbs.
  • c-breadcrumbs__crumb: This class is used to create the item in breadcrumbs.

Syntax: Using Breadcrumbs Tags

<blaze-breadcrumbs aria-label="Breadcrumbs">
  <blaze-breadcrumb href="/">
       ...
  </blaze-breadcrumb>
  ...
</blaze-breadcrumbs>

Syntax: Using Breadcrumbs CSS classes

<nav aria-label="Breadcrumb">
  <ol class="c-breadcrumbs">
    <li class="c-breadcrumbs__crumb">
      <a class="c-link">...</a>
    </li>
    ...
  </ol>
</nav>

Example 1: The following code demonstrates the Blaze UI Breadcrumbs using Breadcrumbs Tags.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Breadcrumbs </title>
    <link rel="stylesheet" href=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
</head>
  
<body>
    <div class="u-centered ">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3
            Blaze UI Breadcrumbs 
        </h3>
  
        <blaze-breadcrumbs aria-label="Breadcrumbs">
            <blaze-breadcrumb href="/">
                Home
            </blaze-breadcrumb>
            <blaze-breadcrumb href="/">
                Courses
            </blaze-breadcrumb>
            <blaze-breadcrumb href="/">
                Java
            </blaze-breadcrumb>
            <blaze-breadcrumb
                OOPS
            </blaze-breadcrumb>
        </blaze-breadcrumbs>
    </div>
</body>
  
</html>


Output:

 

Example 2: The following code demonstrates the Blaze UI Breadcrumbs using Breadcrumbs CSS classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Breadcrumbs </title>
    <link rel="stylesheet" href=
  
    <script type="module" src=
    </script>
    <script nomodule="" src=
    </script>
</head>
  
<body>
    <div class="u-centered ">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3
            Blaze UI Breadcrumbs 
        </h3>
  
        <nav aria-label="Breadcrumb">
            <ol class="c-breadcrumbs">
              <li class="c-breadcrumbs__crumb">
                <a class="c-link">
                    Home
                </a>
              </li>
              <li class="c-breadcrumbs__crumb">
                <a class="c-link">
                    GeeksforGeeks
                </a>
              </li>
              <li class="c-breadcrumbs__crumb">
                <a class="c-link">
                    Courses
                </a>
              </li>
              <li class="c-breadcrumbs__crumb">
                <a class="c-link">
                    Python
                </a>
              </li>
              <li class="c-breadcrumbs__crumb" 
                  aria-current="tuples">
                  Tuples
              </li>
            </ol>
        </nav>
    </div>
</body>
  
</html>


Output:

 

Reference: https://www.blazeui.com/components/breadcrumbs/



Last Updated : 06 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads