CSS Breadcrumb

Last updated: 1 month ago

Category: Navigation

Breadcrumb (or 'crumb' for short) navigation visually displays the hierarchical position of the current page within a website's structure, enabling users to quickly navigate back to parent pages or homepage - similar to Windows file directory paths. Built purely with CSS+HTML without encapsulation for easy integration across different web systems.

Basic Usage

Breadcrumbs are used to indicate the current page's position within the website hierarchy, helping users understand their location in the system. Wrap elements with the _crumb class, use rep=label for section names, and rep=hyphen for separators.

Using Different Separators

The rep=hyphen element can contain any text content as a separator.

Using Navigation Headers

The rep=head element represents the navigation header, which can be either text or an icon.

Using Icons

In addition to text, icons can be inserted into the navigation links.