Skip to content
Related Articles

Related Articles

Semantic-UI Breadcrumb Variations

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

Semantic UI offers a “Breadcrumb” component for users to display order or rank in content. There are different variations of breadcrumb in terms of size.

We will create a UI showing the different variations of breadcrumb. After creating this basic template you can work with different components of Semantic UI.

Semantic UI Breadcrumb Variations Class:

  • size: A breadcrumb can have different size classes as tiny, mini, small, large, big, huge and massive.

Syntax:

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

Example: The following example demonstrates all the classes of breadcrumb size variations.

HTML




<!DOCTYPE html>
<html>
   <head>
      <link href=
            rel="stylesheet" />
      <script src=
              integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous">
      </script>
      <script src=
     </script>
   </head>
   <body>
      <div class="ui mini breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Mini Breadcrumb</div>
      </div>
      <br/>
      <div class="ui small breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Small Breadcrumb</div>
      </div>
      <br/>
      <div class="ui large breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Large Breadcrumb</div>
      </div>
      <br/>
      <div class="ui huge breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section"> Huge Breadcrumb</div>
      </div>
      <br/>
      <div class="ui massive breadcrumb" style="margin:30px;">
         <a class="section">Geeks For Geeks Home</a>
         <i class="right chevron icon divider"></i>
         <a class="section">Articles</a>
         <i class="right chevron icon divider"></i>
         <div class="active section">Massive Breadcrumb</div>
      </div>
   </body>
</html>


Output:

Semantic-UI Breadcrumb Variations

Semantic-UI Breadcrumb Variations

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!