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: