Skip to content
Related Articles

Related Articles

Semantic-UI Breadcrumb States

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!