Skip to content
Related Articles

Related Articles

Semantic-UI Breadcrumb Content

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

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

Semantic UI Breadcrumb Content Class:

  • Divider: You can use different types of indicators or dividers for depicting the relation between different sections.  It can be an icon or a text as per your requirement.
  • Section: The breadcrumb can contain sections that can be formatted as a link or some text.
  • Link: The breadcrumb can contain links in it.

Syntax:

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

Below example illustrate the Semantic-UI Breadcrumb Content:

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

HTML




<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet"
            href=
   </head>
   <body>
      <center>
        <h1>GeeksforGeeks</h1>
        <strong>Semantic UI Breadcrumb Content Divider</strong>
      </center>
      <br>
      <div class="ui breadcrumb" style="margin:20px;">
         <a class="section"
            style="color:green;">
           GeeksforGeeks
         </a>
         <div class="divider"> / </div>
         <a class="section" 
            style="color:green;">Articles</a>
         <div class="divider"> / </div>
         <div class="active section">Breadcrumb</div>
      </div>
      <br />
      <div class="ui breadcrumb"
           style="margin:20px;">
         <a class="section" style="color:green;">
           GeeksforGeeks
         </a>
         <i class="right angle icon divider"></i>
         <a class="section"  style="color:green;">
           Articles
         </a>
         <i class="right arrow icon divider"></i>
         <div class="active section">
           Breadcrumb
         </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Breadcrumb Content

Semantic-UI Breadcrumb Content

Example 2: The following code demonstrates the breadcrumb Content section class.

HTML




<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet"
            href=
   </head>
   <body>
      <center>
        <h1>GeeksforGeeks</h1>
        <strong>Semantic UI Breadcrumb Content Section</strong>
      </center>
      <br>
      <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>
   </body>
</html>


Output:

Semantic-UI Breadcrumb Content

Semantic-UI Breadcrumb Content

Example 3: The following code demonstrates the breadcrumb section with link class.

HTML




<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet"
            href=
   </head>
   <body>
      <center>
        <h1>GeeksforGeeks</h1>
        <strong>Semantic UI Breadcrumb Content Link</strong>
      </center>
      <br>
      <div class="ui breadcrumb" >
         <div class="section">
           Home section
         </div>
         <div class="divider"> / </div>       
         
         <div class="active section">
           Section with link :
           <a href=
           Semantic UI tutorials
           </a>
         </div>
      </div>
   </body>
</html>


Output:;

Semantic-UI Breadcrumb Content

Semantic-UI Breadcrumb Content


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!