Skip to content
Related Articles

Related Articles

Improve Article

Semantic-UI | Breadcrumb

  • Last Updated : 20 May, 2020
Geek Week

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. It uses a class to add CSS to the elements.

A Breadcrumb is used to show the hierarchy between content.

Example 1: This example creating a simple Breadcrumb.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
  
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2>Breadcrumb</h2>
        <div class="ui breadcrumb">
            <a class="section">Home</a>
            <i class="right angle icon divider"></i>
            <a class="section">Data Structure</a>
            <i class="right angle icon divider"></i>
            <div class="active section">Link-List</div>
        </div>
        <br><br>
        <div class="ui breadcrumb">
            <a class="section">Home</a>
            <div class="divider"> / </div>
            <a class="section">Data Structure</a>
            <div class="divider"> / </div>
            <div class="active section">Link-List</div>
        </div>
    </div>
</body>
  
</html>

Output:

Example 2: Active and Disabled state in Breadcrumb.






<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2>Active state Breadcrumb</h2>
        <div class="ui breadcrumb">
            <a class="section">Web</a>
            <div class="divider"> / </div>
            <div class="active section">
                Bootstrap
            </div>
        </div>
        <br><br>
        <h2>Disabled state breadcrumb</h2>
        <div class="ui breadcrumb">
            <a class="section">Web</a>
            <div class="divider"> / </div>
            <div class="disabled section">
                Semantic-UI
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

Example 3: Different Size of Breadcrumb.




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI</title>
    <link href=
        rel="stylesheet" />
  
    <script src=
    </script>
</head>
  
<body>
    <div class="ui container">
        <h2>Breadcrumb</h2>
        <div class="ui mini breadcrumb">
            <a class="section">Home</a>
            <i class="right angle icon divider"></i>
            <a class="section">Data Structure</a>
            <i class="right angle icon divider"></i>
            <div class="active section">Link-List</div>
        </div>
        <br><br>
        <div class="ui small breadcrumb">
            <a class="section">Home</a>
            <i class="right angle icon divider"></i>
            <a class="section">Data Structure</a>
            <i class="right angle icon divider"></i>
            <div class="active section">Link-List</div>
        </div>
        <br><br>
        <div class="ui large breadcrumb">
            <a class="section">Home</a>
            <i class="right angle icon divider"></i>
            <a class="section">Data Structure</a>
            <i class="right angle icon divider"></i>
            <div class="active section">Link-List</div>
        </div>
        <br><br>
        <div class="ui huge breadcrumb">
            <a class="section">Home</a>
            <i class="right angle icon divider"></i>
            <a class="section">Data Structure</a>
            <i class="right angle icon divider"></i>
            <div class="active section">Link-List</div>
        </div>
    </div>
</body>
  
</html>

You can use any semantic-UI size class ‘massive’, ‘medium’.
Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :