Semantic UI Breadcrumb

Semantic UI Breadcrumb is a component that provides a way to navigate between different levels of a hierarchy, making it easy for users to understand their current location within a website.

Syntax

<div class="ui breadcrumb">
  <!-- Breadcrumb items go here -->
</div>

Example

<div class="ui breadcrumb">
  <a class="section">Home</a>
  <i class="right chevron icon divider"></i>
  <a class="section">Category</a>
  <i class="right chevron icon divider"></i>
  <div class="active section">Product</div>
</div>

Output

Explanation

• The ui breadcrumb class is applied to create a breadcrumb container.
• Each level of the hierarchy is represented by an <a> (anchor) tag with the class section.
• The divider class is used to add visual separation between breadcrumb items.
• The last item in the breadcrumb is marked as active to indicate the current location.

Use

Semantic UI Breadcrumb is commonly used for navigation in websites with a hierarchical structure. It helps users understand the context of the current page and provides an easy way to navigate back to higher-level pages.

Important Points

• Customize the appearance by adding icons or other elements between breadcrumb items.
• Use the divider class to specify the separator between items.
• The last item in the breadcrumb should be marked as active to indicate the current page.

<div class="ui breadcrumb">
  <a class="section">Home</a>
  <i class="right arrow icon divider"></i>
  <div class="active section">Current Page</div>
</div>

Summary

Semantic UI Breadcrumb is a valuable component for improving website navigation and user experience. By providing a clear trail of the user's path, it enhances the understanding of the website's structure and allows for easy navigation between different levels. Customize the appearance and styling to match the design of your website.