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.

Output:

Semantic-UI Breadcrumb Divider Content

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

Output:

Semantic-UI Breadcrumb Divider Content

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