Semantic-UI Breadcrumb Section Content

Last Updated : 25 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI offers a Breadcrumb component for users to display order or rank in content. It is used to show some hierarchy between content. There are different content representations of breadcrumb. There are different classes that help in managing the hierarchy between the contents of the webpage. In this article, we will be discussing Breadcrumb Section Content along with examples.

Semantic UI Breadcrumb Section Content Class:

Section: This class is used to define breadcrumb as a section that can be formatted as a link or some text.

Syntax:

<div class="ui breadcrumb">
      <a class="section">...</a>
      <div class="divider"> / </div>
      <div class="active section"
        <a href="#">...</a>
      </div>
</div>

Example 1: Below is the code that illustrates the use of Breadcrumb Section Content.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Breadcrumb Section Content</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <br> 
    <center> 
        <h1 class="ui header green"> 
            Geeksforgeeks 
        </h1> 
  
        <h3> 
            Semantic-UI Breadcrumb Section Content 
        </h3> 
  
        <div class="ui breadcrumb"> 
            <div class="section"> 
                Home section 
            </div> 
  
            <div class="divider"> / </div> 
  
            <div class="section"> 
                Articles section 
            </div> 
  
            <div class="divider"> / </div> 
  
            <div class="active section"> 
                This is active section 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Semantic-UI Breadcrumb Section Content

Example 2: Below is another code that illustrates the use of Breadcrumb Section Content.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Breadcrumb Section Content</title> 
  
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
</head> 
  
<body> 
    <br> 
    <center> 
        <h1 class="ui header green"> 
            Geeksforgeeks 
        </h1> 
  
        <h3> 
            Semantic-UI Breadcrumb Section Content 
        </h3> 
  
        <div class="ui breadcrumb"> 
            <div class="section"> 
                GeeksforGeeks Home 
            </div> 
  
            <div class="divider"> -> </div> 
  
            <div class="section"> 
                Courses 
            </div> 
  
            <div class="divider"> -> </div> 
  
            <div class="active section"> 
                <a href= 
"https://www.geeksforgeeks.org/courses/complete-interview-preparation"> 
                    Complete Interview Preparation - Self Paced 
                </a> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>