Open In App

Semantic-UI Breadcrumb States

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI offers many components for users to design their interface. One of them is “Breadcrumb”. 

We will create a UI to show the states of breadcrumb. In this article we will learn about the status of breadcrumbs, where we can make active any item from that breadcrumb by using the active class on it.

Semantic UI Breadcrumb States Class:

  • active: You can make different sections of the breadcrumb active as per the content of your UI.

Syntax:

<div class="ui breadcrumb"> 
  <div class="active section">....</div>
</div>

Example: The following example demonstrates the active section of a breadcrumb using the active class.

HTML




<!DOCTYPE html>
<html>
   <head>
      <link href=
            rel="stylesheet" />
      <script src=
              integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous">
      </script>
      <script src=
     </script>
   </head>
   <body>
      <div class="ui breadcrumb">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="section">Breadcrumb</div>
      </div>
      <br />
      <div class="ui breadcrumb">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Active Breadcrumb</div>
      </div>
   </body>
</html>


Output:

Semantic-UI Breadcrumb States

Semantic-UI Breadcrumb States

Reference: https://semantic-ui.com/collections/breadcrumb.html



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