Breadcrumbs
Overview
Breadcrumbs are a secondary navigation component that display the user’s current location within a hierarchical structure.
They are typically placed near the top of the page and are especially useful for multi-level navigation such as dashboards, settings, and content hierarchies.
The system must support two breadcrumb component types:
-
Default
-
Text Only
Breadcrumb elements support two interaction states:
Default
-
No highlight
-
Standard text or icon color
-
Cursor remains default
Hover
-
Applies only to clickable items
-
Text or icon is highlighted
-
Cursor changes to pointer (hand) to indicate interactivity
Default Breadcrumb
The Default variant includes a Home icon as the first level, followed by text-based navigation levels.
Root (Level 1)
- Displayed as a Home icon
- Must be clickable
- Navigates to the root page
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Intermediate levels (Level 2, Level 3, …)
- Displayed as text links
- Must support hover and click
- Navigates to the corresponding level
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Last level (Current page)
- Displayed as text only
- Read-only
- Must not be clickable
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Visual behavior
- Text links change style on hover
- Divider (/) is displayed between levels
Text Only Breadcrumb
The Text Only variant displays all breadcrumb levels as text without using icons.
Root (Level 1)
- Displayed as text
- Must be clickable
- Navigates to the root page
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Intermediate levels (Level 2, Level 3, …)
- Displayed as text links
- Must support hover and click
- Navigates to the corresponding level
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Last level (Current page)
- Displayed as text only
- Read-only
- Must not be clickable
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Visual behavior
- Text links change style on hover
- Divider (/) is displayed between levels
User Experience
✨ Breadcrumbs should always reflect the actual navigation hierarchy of the page.
✨ The current page must be visually distinct and non-interactive to avoid confusion.
✨ Only navigable breadcrumb levels should support hover and click interactions.
✨ Keep breadcrumb labels concise and meaningful to ensure readability.
✨ Use consistent dividers and spacing between levels.
✨ Breadcrumbs should complement, not replace, primary navigation.
✨ Avoid deep breadcrumb hierarchies where possible to reduce cognitive load.
Figma
All details and specifications in the design can be referenced through the Figma link below.