Semantic-UI Breadcrumb Link Content Last Updated : 21 Mar, 2022 Comments Improve Suggest changes Like Article Like Report The Semantic-UI Breadcrumb Link Content is used to add clickable external links inside 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. Breadcrumb 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. Approach : As we know there is no special class in Breadcrumb for link content, We need to insert the breadcrumb link element inside of anchor i.e. <a> tag. As shown in below syntax. Link: A section may be clickable or contain a link. Syntax: <div class="ui breadcrumb"> <a class="section">Articles</a> <div class="divider"> / </div> <div class="active section"> Ref : <a href="h#"> Content... </a> </div> </div> Example 1: The following code demonstrates the breadcrumb section with the breadcrumb link element. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Link Content</h3> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="divider">/</i> <a class="section">GeeksforGeeks</a> <i class="divider">/</i> <a class="section">Articles</a> <i class="divider">/</i> <div class="active section"> Section with link : <a href= "https://www.geeksforgeeks.org/semantic-ui/"> Semantic UI </a> </div> </div> </center> </body> </html> Output: Example 2: HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Link Content</h3> <br> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">GeeksforGeeks</a> <i class="right chevron icon divider"></i> <a class="section">Articles</a> <i class="right chevron icon divider"></i> <div class="active section"> Semantic Ref : <a href= "https://www.geeksforgeeks.org/semantic-ui/"> Semantic UI </a> </div> </div> </center> </body> </html> Output: Reference: https://semantic-ui.com/collections/breadcrumb.html#link Comment More infoAdvertise with us Next Article Semantic-UI Breadcrumb Link Content O omkarbhusnale Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Semantic-UI Semantic-UI Collections +1 More Similar Reads Semantic-UI Breadcrumb Content 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 conte 2 min read Semantic-UI Breadcrumb Section Content Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like boots 2 min read Semantic-UI Breadcrumb Divider Content In this article, we will learn to use the Semantic-UI Breadcrumb Divider Content of the Semantic UI framework. The Semantic-UI Breadcrumb Divider Content is used to show the relationship between multiple sections inside the breadcrumb elements. Semantic UI is a free-to-use open-source framework that 3 min read Semantic-UI Card Link Content 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. Using Semantic UI, we can even style cards where content is displayed just as in play 2 min read ReactJS Semantic UI Breadcrumb Collections Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use breadcrumb collections in 2 min read Like