AI 브레드크럼 생성기.

Create a breadcrumb component wrapped in a nav element with aria-label="Breadcrumb", containing an ordered list. Render ancestors as links and the final segment as plain text carrying aria-current="page", never as a link to the page you are already on. Insert chevron separators with a CSS pseudo-element or an aria-hidden span so screen readers do not announce them between every item. Keep the trail on one line at desktop widths and allow it to wrap rather than horizontally scroll below 640px. Style the current crumb with a darker weight, not a different color alone.

Create a breadcrumb that collapses when the trail exceeds four levels: show the root, an ellipsis button, the immediate parent and the current page. The ellipsis is a real button with aria-expanded and an accessible label such as "Show 3 hidden levels", and expanding it reveals the hidden crumbs inline rather than in a popover. Keep every level in the DOM at all times so the JSON-LD BreadcrumbList still describes the full path even while the visual trail is collapsed. Below 640px, show only the parent and current page with a back chevron in front of the parent.

Create an e-commerce breadcrumb: a home icon link with a visually hidden "Home" label, then category and subcategory links, then the product name as the current crumb with aria-current="page". Truncate the product name with an ellipsis past 40 characters while keeping the full name in the title attribute and in the JSON-LD BreadcrumbList. Derive the category path from the collection the shopper navigated through rather than the product default, so the trail matches their route. Below 640px, collapse to a single back link showing the subcategory name preceded by a left chevron.

Create a breadcrumb where each segment is a link plus a small chevron button that opens a menu of that level's siblings — switch project, switch environment, switch service. Give each chevron aria-expanded and aria-haspopup="menu", open the menu on Enter, Space or Down arrow, move through items with arrow keys, close on Escape and return focus to the chevron. Keep the segment label itself a plain link so clicking it navigates rather than opening the menu. Add a filter input inside any menu with more than ten siblings. On mobile, render the menu as a bottom sheet.

Create a breadcrumb component that emits both the visual trail and a schema.org BreadcrumbList as JSON-LD in a script type="application/ld+json" block, generated from the same array of segments so the two can never disagree. Each ListItem needs position, name and an absolute item URL — relative URLs are ignored. Include the current page as the final ListItem even though it renders unlinked. Do not include the trail in more than one place on the page, since duplicate BreadcrumbList blocks are treated as conflicting. Render the JSON-LD server-side so crawlers see it without executing JavaScript.

Create a breadcrumb styled as an editorial kicker sitting directly above an article headline: two levels — vertical then topic — in small uppercase text with wide letter spacing, separated by a thin slash, with the current article omitted from the visible trail since the headline beneath already names it. Keep the article as the final entry in the JSON-LD BreadcrumbList even though it is not rendered. Use nav with aria-label="Breadcrumb" so it is still a navigation landmark rather than decorative type, and keep the same trail on mobile at a reduced size rather than collapsing it.