Semantic-UI Breadcrumb States

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"

            rel="stylesheet" />

      <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"

              integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="

              crossorigin="anonymous">

      </script>

      <script src=

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">

     </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

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

Article Tags :

CSS

Web Technologies

Semantic-UI

Semantic-UI Collections