Semantic-UI Breadcrumb Types
Last Updated :
02 Feb, 2022
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.
Semantic-UI offers us so many components, and Breadcrumb is one of them. In this article we will learn about the breadcrumb types, there is only one type and that is breadcrumbs. Breadcrumbs are used to indicate the current page’s location within a navigational hierarchy.
Semantic UI Breadcrumb Type:
- Breadcrumb: A basic breadcrumb. You can apply text and icons as a separator for sections.
Syntax:
<div class="ui breadcrumb">
<div class="section">....</div>
</div>
Below example illustrate the Semantic-UI Breadcrumb Types:
Example: The following example demonstrates the standard breadcrumb using the breadcrumb class.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<h2 style="color:green">GeeksforGeeks</h2>
<b>
<p>Semantic UI standard breadcrumb</p>
</b></br>
<div class="ui breadcrumb" >
<a class="section">Home</a>
<i class="right arrow icon divider"></i>
<a class="section">Articles</a>
<div class="divider"> / </div>
<div class="active section">Breadcrumb</div>
</div>
<br />
<div class="ui breadcrumb">
<a class="section">Home</a>
<i class="right angle icon divider"></i>
<a class="section">Articles</a>
<i class="right angle icon divider"></i>
<div class="active section">Breadcrumb</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/collections/breadcrumb.html#breadcrumb
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...