/* Separator and back-arrow shapes for li::before, painted through a mask so nothing is read aloud. */
@utility sep-chevron { mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3.5 10.5 8 6 12.5'/></svg>") center / contain no-repeat; }
@utility sep-back { mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M10 3.5 5.5 8l4.5 4.5'/></svg>") center / contain no-repeat; }
About this set
Three answers to the long path problem. Collapsed middle keeps the first level, the parent and the current page, and folds the levels in between into a button marked with an ellipsis. It is a native details element, so clicking or pressing Enter opens a small menu of the hidden levels with no script. The responsive variant makes the nav a size container: in a wide container it shows the full path, and once the container is narrower than 26rem it hides everything except the parent level and turns it into a back link with a left chevron, the pattern many mobile apps use. The demo shows the same markup in a wide and a narrow box. Truncated labels keeps every level but cuts long names with an ellipsis at 16 characters and the current page at 26, and a label expands to its full length on hover or keyboard focus. Screen readers always get the full text. The Bootstrap version styles the menu with .dropdown-menu and .dropdown-item and truncates with .text-truncate.
What’s included
Middle levels collapsed into a native details menu, no JavaScript
Container query turns the path into a back link below 26rem
Long labels truncated with an ellipsis and expanded on hover or focus
Bootstrap .dropdown-menu, .dropdown-item and .text-truncate
Same markup works in a sidebar, a card or full width
Accessibility
The nav is labelled Breadcrumb, and the summary has aria-label="Show 3 more levels" so the ellipsis is announced as a disclosure button with its expanded state. Truncated labels keep their full text for screen readers. In a narrow container only the parent link remains in the accessibility tree, which is intentional for the back-link pattern. All links and the summary show a 2px focus outline; transitions stop under prefers-reduced-motion. The details menu closes when the summary is activated again, not on Escape.
Customise it
Colours are --bx-link, --bx-hover and --bx-current on .bcx. Change the 26rem in the @container rule to move the breakpoint, and the 16ch and 26ch max-widths for truncation. In Tailwind edit @max-[26rem]: and max-w-[16ch].
