Breadcrumbs Styles

File Information

• Path: app/assets/scss/layout/_breadcrumbs.scss
• Purpose: Styles for breadcrumb navigation
• Type: Layout component

Overview

The breadcrumbs file contains styles for breadcrumb navigation, including back button and breadcrumb list styles.

Key Components

.backBtn

Back button/navigation:

• Display: Flex, aligned center
• Font weight: Medium
• Color: Blue-500
• Gap: 8px
• Cursor: Pointer
• Transition: Smooth
• Hover: Blue-700 color and stroke

.bread-crumbs

Breadcrumb container:

• Font size: 14px
• Font weight: Medium
• Line height: 1.45
• Color: Blue-500

Breadcrumb List (.bread-crumbs-list)

• Detail linked: Cursor pointer
• Linked (not last): Blue-500, cursor pointer
• Linked (last): Gray-600
• Hover: Blue-700

Breadcrumb Arrow (.bread-crumbs-arrow)

• Display: Flex
• Margin-top: 1px
• SVG: Rotated 270deg

Usage

<button class="backBtn">
  <svg>...</svg>
  Back
</button>

<div class="bread-crumbs">
  <div class="bread-crumbs-list">
    <span class="linked">Home</span>
    <span class="bread-crumbs-arrow">
      <svg>...</svg>
    </span>
    <span class="linked">Folder</span>
    <span class="bread-crumbs-arrow">
      <svg>...</svg>
    </span>
    <span>Current Page</span>
  </div>
</div>

Related Documentation

• Header - Header navigation
• Variables - Color variables