Semantic-UI Breadcrumb Content
Last Updated :
22 Apr, 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 a Breadcrumb component for users to display order or rank in content. It is used to show some hierarchy between content. There are different content representations of breadcrumb. There are different classes that help in managing the hierarchy between the contents of the webpage
Semantic UI Breadcrumb Content Class:
- Divider: You can use different types of indicators or dividers for depicting the relation between different sections. It can be an icon or a text as per your requirement.
- Section: The breadcrumb can contain sections that can be formatted as a link or some text.
- Link: The breadcrumb can contain links in it.
Syntax:
<div class="ui breadcrumb">
<a class="section">...</a>
<div class="divider"> / </div>
<div class="active section"
<a href="#">...</a>
</div>
</div>
Below example illustrate the Semantic-UI Breadcrumb Content:
Example 1: The following example demonstrates the breadcrumb content divider class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>Semantic UI Breadcrumb Content Divider</strong>
</center>
<br>
<div class="ui breadcrumb" style="margin:20px;">
<a class="section"
style="color:green;">
GeeksforGeeks
</a>
<div class="divider"> / </div>
<a class="section"
style="color:green;">Articles</a>
<div class="divider"> / </div>
<div class="active section">Breadcrumb</div>
</div>
<br />
<div class="ui breadcrumb"
style="margin:20px;">
<a class="section" style="color:green;">
GeeksforGeeks
</a>
<i class="right angle icon divider"></i>
<a class="section" style="color:green;">
Articles
</a>
<i class="right arrow icon divider"></i>
<div class="active section">
Breadcrumb
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Breadcrumb Content
Example 2: The following code demonstrates the breadcrumb Content section class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>Semantic UI Breadcrumb Content Section</strong>
</center>
<br>
<div class="ui breadcrumb" >
<div class="section">
Home section
</div>
<div class="divider"> / </div>
<div class="section">
Articles section
</div>
<div class="divider"> / </div>
<div class="active section">
This is active section
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Breadcrumb Content
Example 3: The following code demonstrates the breadcrumb section with link class.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<strong>Semantic UI Breadcrumb Content Link</strong>
</center>
<br>
<div class="ui breadcrumb" >
<div class="section">
Home section
</div>
<div class="divider"> / </div>
<div class="active section">
Section with link :
<a href=
Semantic UI tutorials
</a>
</div>
</div>
</body>
</html>
|
Output:;
Semantic-UI Breadcrumb Content
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...