In this article, we will learn to use the Semantic-UI Breadcrumb Size Variations of the Semantic UI framework. The Semantic-UI Breadcrumb size Variations are used to add different sizes of the breadcrumb elements.
Semantic UI is a free-to-use open-source framework that offers multiple classes to create beautiful and responsive UI. It makes use of jQuery and CSS to create amazing UI which are much similar to bootstrap. It has many classes which are used for styling different elements in the HTML web page structure.
Semantic UI offers many components for users to design their interface. One of them is “Breadcrumb”. A breadcrumb is a container that can contain sections that can either be formatted as a link or text. We will create a UI to show the different size variations of breadcrumb.
Semantic-UI Breadcrumb Size Variations Classes :
- mini: This class is used to display the breadcrumb of mini size.
- tiny: This class is used to display the breadcrumb of tiny size.
- small: This class is used to display the breadcrumb of small size.
- large: This class is used to display the breadcrumb of large size.
- big: This class is used to display the breadcrumb of big size.
- huge: This class is used to display the breadcrumb of huge size.
- massive: This class is used to display the breadcrumb of massive size.
Syntax :
<div class="ui large breadcrumb">
Large Breadcrumb
</div>Example 1: This example describes the uses of Semantic-UI Breadcrumb Size Variations.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Compressed Semantic UI CSS -->
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<h3>Semantic UI: Breadcrumb Size Variation</h3>
<h6>Mini</h6>
<div class="ui mini breadcrumb">
<a class="section">Home</a>
<i class="right chevron icon divider"></i>
<a class="section">Article</a>
<i class="right chevron icon divider"></i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h5>tiny</h5>
<div class="ui tiny breadcrumb">
<a class="section">Home</a>
<i class="right chevron icon divider"></i>
<a class="section">Article</a>
<i class="right chevron icon divider"></i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h4>small</h4>
<div class="ui small breadcrumb">
<a class="section">Home</a>
<i class="right chevron icon divider"></i>
<a class="section">Article</a>
<i class="right chevron icon divider"></i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h3>large</h3>
<div class="ui large breadcrumb">
<a class="section">Home</a>
<i class="right chevron icon divider"></i>
<a class="section">Article</a>
<i class="right chevron icon divider"></i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h2>big</h2>
<div class="ui big breadcrumb">
<a class="section">Home</a>
<i class="right chevron icon divider"></i>
<a class="section">Article</a>
<i class="right chevron icon divider"></i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h1>huge</h1>
<div class="ui huge breadcrumb">
<a class="section">Home</a>
<i class="right chevron icon divider"></i>
<a class="section">Article</a>
<i class="right chevron icon divider"></i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h1>massive</h1>
<div class="ui massive breadcrumb">
<a class="section">Home</a>
<i class="right chevron icon divider"></i>
<a class="section">Article</a>
<i class="right chevron icon divider"></i>
<div class="active section">Semantic UI</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Breadcrumb Size Variation
Example 2:
HTML
<!DOCTYPE html> <html>
<head>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Semantic UI: Breadcrumb Size Variation</h3>
<h6>Mini</h6>
<div class="ui mini breadcrumb">
<a class="section">Home</a>
<i class="divider">/</i>
<a class="section">Article</a>
<i class="divider">/</i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h5>tiny</h5>
<div class="ui tiny breadcrumb">
<a class="section">Home</a>
<i class="divider">/</i>
<a class="section">Article</a>
<i class="divider">/</i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h4>small</h4>
<div class="ui small breadcrumb">
<a class="section">Home</a>
<i class="divider">/</i>
<a class="section">Article</a>
<i class="divider">/</i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h3>large</h3>
<div class="ui large breadcrumb">
<a class="section">Home</a>
<i class="divider">/</i>
<a class="section">Article</a>
<i class="divider">/</i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h2>big</h2>
<div class="ui big breadcrumb">
<a class="section">Home</a>
<i class="divider">/</i>
<a class="section">Article</a>
<i class="divider">/</i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h1>huge</h1>
<div class="ui huge breadcrumb">
<a class="section">Home</a>
<i class="divider">/</i>
<a class="section">Article</a>
<i class="divider">/</i>
<div class="active section">Semantic UI</div>
</div>
<br>
<h1>massive</h1>
<div class="ui massive breadcrumb">
<a class="section">Home</a>
<i class="divider">/</i>
<a class="section">Article</a>
<i class="divider">/</i>
<div class="active section">Semantic UI</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Breadcrumb Size Variation
Reference: https://semantic-ui.com/collections/breadcrumb.html#size