Skip to content
Related Articles

Related Articles

Blaze UI Breadcrumbs

View Discussion
Improve Article
Save Article
  • Last Updated : 06 May, 2022
View Discussion
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!