mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 05:38:18 +00:00
98 lines
3.4 KiB
Plaintext
98 lines
3.4 KiB
Plaintext
---
|
|
layout: layouts/page.njk
|
|
title: Breadcrumb
|
|
description: Displays the path to the current resource using a hierarchy of links.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
{% from "dropdown-menu.njk" import dropdown_menu %}
|
|
|
|
<div class="alert mb-6">
|
|
{% lucide "circle-alert" %}
|
|
<h2>There is no dedicated breadcrumb component in Basecoat.</h2>
|
|
</div>
|
|
|
|
{% set code_script %}
|
|
<script>
|
|
{% fetchCode "src/js/dropdown-menu.js" %}
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
window.basecoat.registerDropdownMenu(Alpine);
|
|
});
|
|
</script>
|
|
{% endset %}
|
|
|
|
{% set code_html %}
|
|
<ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
|
|
<li class="inline-flex items-center gap-1.5">
|
|
<a href="#" class="hover:text-foreground transition-colors">Home</a>
|
|
</li>
|
|
<li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
|
|
<li class="inline-flex items-center gap-1.5">
|
|
{% set trigger %}
|
|
{% lucide "ellipsis" %}
|
|
{% endset %}
|
|
{% call dropdown_menu(
|
|
id="demo-breadcrumb-menu",
|
|
trigger=trigger,
|
|
trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
|
|
register_on=["alpine:init", "htmx:afterSwap"]
|
|
) %}
|
|
<nav role="menu">
|
|
<button type="button" role="menuitem">Documentation</button>
|
|
<button type="button" role="menuitem">Themes</button>
|
|
<button type="button" role="menuitem">GitHub</button>
|
|
</nav>
|
|
{% endcall %}
|
|
</li>
|
|
<li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
|
|
<li class="inline-flex items-center gap-1.5">
|
|
<a href="#" class="hover:text-foreground transition-colors">Components</a>
|
|
</li>
|
|
<li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
|
|
<li class="inline-flex items-center gap-1.5">
|
|
<span class="text-foreground font-normal">Breadcrumb</span>
|
|
</li>
|
|
</ol>
|
|
{% endset %}
|
|
|
|
{{ code_preview("dropdown-menu", code_script | prettyHtml ~ code_html | prettyHtml) }}
|
|
|
|
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
|
|
|
<div class="alert my-6">
|
|
{% lucide "circle-alert" %}
|
|
<h2>This component requires Javascript.</h2>
|
|
</div>
|
|
|
|
<section class="prose">
|
|
<p>This example uses some simple Tailwind CSS styles along with the <a href="/components/dropdown-menu">Dropdown Menu</a>.</p>
|
|
|
|
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
|
</section>
|
|
|
|
<div class="flex flex-wrap gap-2 my-6">
|
|
<a class="badge-outline" href="/installation/#install-js">
|
|
Components with Javascript
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a class="badge-outline" href="/installation/#install-cli">
|
|
Use the CLI
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/select.js" target="_blank">
|
|
Individual JS file (select.js)
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
</div>
|
|
|
|
{% from "tabs.njk" import tabs %}
|
|
{% set tabsets = [
|
|
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
|
{ tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
|
|
] %}
|
|
{{ tabs(id="alert-dialog", tabsets=tabsets) }} |