Skip to content
Forge

Breadcrumb

An accessible breadcrumb that places the page within the site and tightens on mobile to fit on one line.

  • Tailwind
  • React
  • CSS
  • WordPress
Open in a new tab

Description

An ordered list in a named nav element, the current page marked with aria-current and separators ignored by screen readers. Below 640 pixels only the parent page and the current title remain, the latter neatly truncated.

Code

Loading the code…

Archive contents

fil-ariane-html-tailwind.zip3 files · 3 Ko

  • index.html4 Ko
  • README.md2 Ko
  • LICENSE.md1 Ko

Tags

Updated on October 13, 2026.

In the same spirit

  • Page table of contents

    Free

    A table of contents that follows the reader through a long article and highlights the current section.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Pagination

    Free

    Complete pagination with the current page, ellipses and previous/next arrows that are properly disabled.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Dropdown menu

    Free

    A navigation bar with dropdown submenus that close with the Escape key, an outside click or when focus leaves the menu.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component

  • Video testimonial with transcript

    Free

    A CSS-drawn video poster with a play button, the testimonial's key quote, its author, and the timestamped transcript in a collapsible panel.

    • Tailwind
    • React
    • CSS
    • WordPress
    Component