Semantic-UI Breadcrumb Divider Content

In this article, we will learn to use the Semantic-UI Breadcrumb Divider Content of the Semantic UI framework. The Semantic-UI Breadcrumb Divider Content is used to show the relationship between multiple sections inside the breadcrumb elements.

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. Breadcrumb 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. One of them is Divider Content.

Semantic UI Breadcrumb Divider Content Class:

divider: In breadcrumb can use various types of dividers to show the relation between multiple sections. It can be an icon or a text as per your requirement.

Syntax :

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

Example 1: The following example demonstrates the breadcrumb content divider class.

HTML

<!DOCTYPE html> 

<html> 

<head> 

  <title>Semantic UI Breadcrumb Divider Content</title> 

    <!-- Compressed Semantic UI CSS -->

  <link rel="stylesheet" 

        href= 

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

</head> 

<body> 

  <center> 

    <h1 style="color: green;"> 

        GeeksforGeeks 

    </h1> 

    <h3>Semantic UI: Breadcrumb Divider Content</h3> 

    <br> 

    <div class="ui breadcrumb"> 

      <a class="section">Home</a> 

      <i class="divider"> / </i> 

      <a class="section">GeeksforGeeks</a> 

      <i class="divider"> / </i> 

      <a class="section">Articles</a> 

      <i class="divider"> / </i> 

      <div class="active section">Semantic UI</div> 

    </div> 

    <br> 

    <div class="ui breadcrumb"> 

      <a class="section">Home</a> 

      <i class="right chevron icon divider"></i> 

      <a class="section">GeeksforGeeks</a> 

      <i class="right chevron icon divider"></i> 

      <a class="section">Articles</a> 

      <i class="right chevron icon divider"></i> 

      <div class="active section">Semantic UI</div> 

    </div> 

    <br> 

    <div class="ui breadcrumb"> 

      <a class="section">Home</a> 

      <i class="right arrow icon divider"></i> 

      <a class="section">GeeksforGeeks</a> 

      <i class="right arrow icon divider"></i> 

      <a class="section">Articles</a> 

      <i class="right arrow icon divider"></i> 

      <div class="active section">Semantic UI</div> 

    </div> 

  </center> 

</body> 

</html>

Output:

Semantic-UI Breadcrumb Divider Content

Example 2: The following example demonstrates the breadcrumb content divider class with the content Link class.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <!-- Compressed Semantic UI CSS -->

  <title>Semantic UI Breadcrumb Divider Content</title> 

  <link rel="stylesheet" 

        href= 

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

</head> 

<body> 

  <center> 

    <h1 style="color: green;"> 

        GeeksforGeeks 

    </h1> 

    <h3>Semantic UI: Breadcrumb Divider Content</h3> 

    <br> 

    <div class="ui breadcrumb"> 

      <a class="section">Home</a> 

      <i class="right chevron icon divider"></i> 

      <a class="section">GeeksforGeeks</a> 

      <i class="right chevron icon divider"></i> 

      <a class="section">Articles</a> 

      <i class="right chevron icon divider"></i> 

      <div class="active section"> 

        Semantic Ref : 

        <a href= 

"https://www.geeksforgeeks.org/semantic-ui/"> 

          Semantic UI 

        </a> 

      </div> 

    </div> 

    <br> 

    <div class="ui breadcrumb"> 

      <a class="section">Home</a> 

      <i class="right arrow icon divider"></i> 

      <a class="section">GeeksforGeeks</a> 

      <i class="right arrow icon divider"></i> 

      <a class="section">Articles</a> 

      <i class="right arrow icon divider"></i> 

      <div class="active section"> 

        Semantic Ref : 

        <a href= 

"https://www.geeksforgeeks.org/semantic-ui/"> 

          Semantic UI 

        </a> 

      </div> 

    </div> 

    <br> 

    <div class="ui breadcrumb"> 

      <a class="section">Home</a> 

      <i class="divider"> / </i> 

      <a class="section">GeeksforGeeks</a> 

      <i class="divider"> / </i> 

      <a class="section">Articles</a> 

      <i class="divider"> / </i> 

      <div class="active section"> 

        Semantic Ref : 

        <a href= 

"https://www.geeksforgeeks.org/semantic-ui/"> 

          Semantic UI 

        </a> 

      </div> 

    </div> 

  </center> 

</body> 

</html>