Semantic-UI Breadcrumb Variations
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> < script src = "https://code.jquery.com/jquery-3.1.1.min.js" integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" > </ script > </ head > < body > < div class = "ui mini breadcrumb" style = "margin:30px;" > < a class = "section" >Beginner For Beginner 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" >Beginner For Beginner 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" >Beginner For Beginner 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" >Beginner For Beginner 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" >Beginner For Beginner 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:
Reference: https://semantic-ui.com/collections/breadcrumb.html
Contact Us