basecoat/docs/src/components/breadcrumb.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Breadcrumb	Displays the path to the current resource using a hierarchy of links.	label id Usage usage

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %} {% from "dropdown-menu.njk" import dropdown_menu %}

{% lucide "circle-alert" %}

There is no dedicated Breadcrumb component in Basecoat.

{% set code_html %}

1. Home
2. {% lucide "chevron-right", { "class": "size-3.5" } %}
3. {% 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"} ) %} Documentation Themes GitHub {% endcall %}
4. {% lucide "chevron-right", { "class": "size-3.5" } %}
5. Components
6. {% lucide "chevron-right", { "class": "size-3.5" } %}
7. Breadcrumb

{% endset %}

{{ code_preview("dropdown-menu", code_html | prettyHtml) }}

Usage

You can style an ordered list of links combined with chevron icons as show below. The example above demonstrates a more complex use case using the Dropdown Menu component.

{% set code_simple %}

1. Home
2. {% lucide "chevron-right", { "class": "size-3.5" } %}
3. Components

{% endset %} {{ code_block(code_simple | prettyHtml, "html") }}