Breadcrumb: Malachite

Prototype

HTML
View
Context
Info
Notes


        
        <div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Breadcrumb
        <span class="token string" style="font-size: var(--font-size-2)">malachite</span>
    </h1>
    <hr>
    <h3 class="celestial-blue">Simple Breadcrumb</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/">Home</a></li>
                <li><a href="#/instances">Instances</a></li>
                <li><a href="#/instances/entities">Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1">631e8eac-b220-43b0-9874-7f14c6ca55a1</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">No caret</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/">Home</a></li>
                <li><a href="#/instances">Instances</a></li>
                <li><a href="#/instances/entities">Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1">631e8eac-b220-43b0-9874-7f14c6ca55a1</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Breadcrumb with Custom Icons</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
                <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
                <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
                        631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
                </li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 00</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret size-00 malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
                <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
                <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
                        631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
                </li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 0</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret size-0 malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
                <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
                <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
                        631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
                </li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 1</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret size-1 malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
                <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
                <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
                        631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
                </li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 2</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret size-2 malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
                <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
                <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
                        631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
                </li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 3</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret size-3 malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
                <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
                <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
                        631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
                </li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 4</h3>
    <div style="padding: var(--size-4);">
        <nav class="breadcrumb no-caret size-4 malachite" aria-label="breadcrumb">
            <ul>
                <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
                <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
                <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
                <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
                        631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
                </li>
            </ul>
        </nav>
    </div>
</div>


        <div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Breadcrumb
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 class="celestial-blue">Simple Breadcrumb</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/">Home</a></li>
        <li><a href="#/instances">Instances</a></li>
        <li><a href="#/instances/entities">Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1">631e8eac-b220-43b0-9874-7f14c6ca55a1</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">No caret</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/">Home</a></li>
        <li><a href="#/instances">Instances</a></li>
        <li><a href="#/instances/entities">Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1">631e8eac-b220-43b0-9874-7f14c6ca55a1</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Breadcrumb with Custom Icons</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
        <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
        <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
          631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
        </li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 00</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret size-00 {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
        <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
        <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
          631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
        </li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 0</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret size-0 {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
        <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
        <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
          631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
        </li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 1</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret size-1 {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
        <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
        <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
          631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
        </li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 2</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret size-2 {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
        <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
        <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
          631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
        </li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 3</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret size-3 {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
        <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
        <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
          631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
        </li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 4</h3>
  <div style="padding: var(--size-4);">
    <nav class="breadcrumb no-caret size-4 {{#if modifier}}{{modifier}}{{/if}}" aria-label="breadcrumb">
      <ul>
        <li><a href="#/"><i class="ti ti-home mexican-pink"></i> Home</a></li>
        <li><a href="#/instances"><i class="ti ti-hexagon-letter-i mexican-pink"></i> Instances</a></li>
        <li><a href="#/instances/entities"><i class="ti ti-hexagon-letter-e mexican-pink"></i> Entities</a></li>
        <li><a href="#/instances/entities/631e8eac-b220-43b0-9874-7f14c6ca55a1"><i class="ti ti-hexagon-number-6-filled mexican-pink"></i>
          631e8eac-b220-43b0-9874-7f14c6ca55a1</a>
        </li>
      </ul>
    </nav>
  </div>
</div>


        
            
            {
  "modifier": "malachite"
}

Handle: @breadcrumb--malachite
Preview:
- With layout
- Component only
Filesystem Path: components/02-molecules/breadcrumb/breadcrumb.hbs

No notes defined.