Skip to content
Related Articles

Related Articles

Semantic-UI Breadcrumb Types

View Discussion
Improve Article
Save Article
  • Last Updated : 02 Feb, 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 us so many components, and Breadcrumb is one of them. In this article we will learn about the breadcrumb types, there is only one type and that is breadcrumbs. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy. 

Semantic UI Breadcrumb Type:

  • Breadcrumb: A basic breadcrumb. You can apply text and icons as a separator for sections.

Syntax:

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

Below example illustrate the Semantic-UI Breadcrumb Types:

Example: The following example demonstrates the standard breadcrumb using the breadcrumb class.

HTML




<!DOCTYPE html>
<html>
   <head>
      <link href=
         rel="stylesheet" />
       
   </head>
   <body>
      <div class="ui container">
         <h2 style="color:green">GeeksforGeeks</h2>
         <b>
            <p>Semantic UI standard breadcrumb</p>
  
         </b></br>
         <div class="ui breadcrumb" >
            <a class="section">Home</a>
            <i class="right arrow icon divider"></i>
            <a class="section">Articles</a>
            <div class="divider"> / </div>
            <div class="active section">Breadcrumb</div>
         </div>
         <br />
         <div class="ui breadcrumb">
            <a class="section">Home</a>
            <i class="right angle icon divider"></i>
            <a class="section">Articles</a>
            <i class="right angle icon divider"></i>
            <div class="active section">Breadcrumb</div>
         </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Breadcrumb Types

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!