Semantic-UI Breadcrumb Active State

Last Updated : 10 Mar, 2022

Semantic UI is a free-to-use open-source framework that offers multiple classes to create beautiful and responsive UI. It makes use of jQuery and CSS to create amazing UI which are much similar to bootstrap. It has many classes which are used for styling different elements in the HTML web page structure.

Semantic UI offers many components for users to design their interface. One of them is “Breadcrumb”. A breadcrumb is a container that can contain sections that can either be formatted as a link or text.

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

Semantic UI Breadcrumb Active State Class:

active: You can make various sections of the breadcrumb as an active state as per the content of your UI by using the active class.

Syntax:

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

Example 1: In this example, we demonstrate the active section of a breadcrumb using the active class using <div> tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
     <title>Semantic-UI Breadcrumb Active State</title> 
     <!-- Compressed Semantic UI CSS -->
     <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks </h1> 
        <h3>Semantic UI: Breadcrumb Active State</h3> 
  
        <div class="ui breadcrumb"> 
            <a class="section">Home</a> 
            <i class="right chevron icon divider"></i> 
            <a class="section">Articles</a> 
            <i class="right chevron icon divider"></i> 
            <a class="section">Semantic UI</a> 
            <i class="right chevron icon divider"></i> 
            <a class="section">Breadcrumb</a> 
            <i class="right chevron icon divider"></i> 
            <div class="active section">Active State</div> 
        </div> 
    </center>      
</body> 
</html>

Output:

Semantic-UI Breadcrumb Active State

Example 2: In this example, we demonstrate the clickable active section of a breadcrumb using the active class using <a> tag.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Breadcrumb Active State</title> 
    <!-- Compressed Semantic UI CSS -->
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
      rel="stylesheet" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="ui green header"> 
            GeeksforGeeks 
        </h1> 
        <h3>Semantic UI: Breadcrumb Active State</h3> 
  
        <div class="ui breadcrumb"> 
            <a class="section">Home</a> 
            <i class="right chevron icon divider"></i> 
            <a class="section">Articles</a> 
            <i class="right chevron icon divider"></i> 
            <a class="section">Semantic UI</a> 
            <i class="right chevron icon divider"></i> 
            <a class="section">Breadcrumb</a> 
            <i class="right chevron icon divider"></i> 
            <a class=" active section">Active State</a> 
        </div> 
    </center> 
</body> 
</html>