webdevpuneet.com

Related Snippets

101 in Navigation category
55–60 of 60

Mega Menu Panel

Account Switcher

Sticky Product Bar

Floating Share Dock

Sidebar Mini

Breadcrumb Dropdown

Breadcrumb Dropdown — Free HTML CSS JS Collapsed Path Nav

Breadcrumb Dropdown · Navigation · Plain HTML, CSS & JS · Live preview

CategoryNavigation
TagsKeyboard NavigationAccessibility

Copy & paste

Source Code

<nav class="bd-nav" aria-label="Breadcrumb">
  <ol class="bd-crumbs" id="bdCrumbs">
    <li><a href="#">Home</a></li>
    <li class="bd-collapsed">
      <button type="button" class="bd-more" id="bdMore" aria-haspopup="true" aria-expanded="false" aria-label="Show hidden path">…</button>
      <ul class="bd-menu" id="bdMenu" role="menu">
        <li role="none"><a role="menuitem" href="#">Workspace</a></li>
        <li role="none"><a role="menuitem" href="#">Projects</a></li>
        <li role="none"><a role="menuitem" href="#">Marketing site</a></li>
      </ul>
    </li>
    <li><a href="#">Pages</a></li>
    <li><a href="#">Landing</a></li>
    <li aria-current="page">Hero section</li>
  </ol>
</nav>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Semantic breadcrumb
nav + ordered list with aria-current.
CSS chevrons
Border-rotated separators, no glyphs.
Collapsed middle
Deep levels fold into a … menu.
Path preserved
Hidden crumbs stay in the dropdown.
ARIA dropdown
aria-haspopup and aria-expanded on the button.
Outside-click close
contains() check dismisses the menu.
Escape to close
Keyboard dismissal supported.
Graceful wrap
Flex-wrap fallback on tiny screens.

About this UI Snippet

Breadcrumb Dropdown — Collapse Deep Paths Without Losing Them

Screenshot of the Breadcrumb Dropdown snippet rendered live

The breadcrumb dropdown solves the problem of long navigation trails: instead of wrapping a deep path across several lines, the middle segments collapse into a single "…" button that opens a menu of the hidden levels. This snippet builds it with a semantic ordered list, CSS, and a small vanilla JavaScript dropdown controller.

A semantic, accessible trail

The breadcrumb is a real <nav aria-label="Breadcrumb"> wrapping an ordered list, with the current page marked aria-current="page" and rendered as plain text rather than a link. This is the structure search engines and screen readers expect from a breadcrumb, so the collapse is an enhancement layered on top of correct semantics, not a replacement for them.

CSS chevron separators

The arrows between crumbs aren't characters or images — each non-first <li> draws a chevron with a ::before made from two borders rotated 45°. Generating separators in CSS means they never get selected or copied with the text, scale crisply, and recolour with a single property. The trail uses flex with flex-wrap, so on a truly tiny screen it can still wrap gracefully as a fallback.

The collapsed middle

The middle segment is a bd-collapsed list item holding a "…" button and a hidden menu of the levels it represents. Keeping the hidden crumbs in the DOM (inside the dropdown) rather than removing them means the full path is still available to anyone who wants it — you've folded the trail, not truncated it. The button carries aria-haspopup and aria-expanded so assistive tech knows it opens a menu and whether it's open.

The dropdown mechanics

Clicking "…" toggles an is-open class that fades and scales the menu in from its top-left origin with a short transition; pointer-events are disabled while closed so the hidden menu never blocks clicks. The controller closes the menu on an outside click (using menu.contains to ignore clicks inside it) and on the Escape key — the two dismissals every dropdown should support. stopPropagation on the button prevents its own click from immediately triggering the outside-click close.

Why collapse the middle, not the ends

The first crumb (home/root) and the last two (parent and current page) are the most useful for orientation, so those stay visible and only the deep middle folds away. This mirrors how file managers and IDEs handle long paths, keeping the trail compact while preserving the context that matters.

Customizing it

Choose how many crumbs to keep on each side before collapsing, restyle the chevrons and menu, or build the list dynamically and only insert the dropdown when the path exceeds a length. Pair it with a breadcrumb, a nested dropdown, or a sidebar nav.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA breadcrumb renders with a … in the middle.
  2. 2
    Click the …A menu of the hidden path levels opens.
  3. 3
    Click outsideThe menu closes; Escape closes it too.
  4. 4
    Follow a crumbEach link navigates to that level.
  5. 5
    Choose what collapsesDecide how many crumbs stay on each side.
  6. 6
    Recolor the chevronsEdit the ::before border colors.

Real-world uses

Common Use Cases

Deep application paths
Collapse middle segments into a single ellipsis button, giving a compact path as an alternative to a plain breadcrumb.
File manager trails
Fold long folder paths inside a file manager UI, with hidden levels preserved in the dropdown menu.
Nested navigation
Pair with a nested dropdown so deep structures are navigable both by path and by menu.
Documentation orientation
Orient readers above a table of contents, using a semantic nav and ordered list with aria-current.
Dashboard and CMS headers
Show a header path beside a sidebar nav inside a dashboard layout, with Escape closing the menu.
Related: CSS Anchor-Positioned Tooltip Menu
See the CSS Anchor-Positioned Tooltip Menu for a related navigation pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

The first crumb (root) and the last two (parent and current page) give the most orientation, so they stay visible and only the deep middle folds into the … menu. This mirrors how file managers and IDEs handle long paths, keeping the trail compact while preserving the context that matters most.

Yes. The collapsed crumbs stay in the DOM inside the dropdown rather than being removed, so the full path is available to anyone who opens the menu — you fold the trail rather than truncate it. The toggle button carries aria-haspopup and aria-expanded so assistive tech knows it opens a menu and its state.

Each non-first list item draws a chevron with a ::before made from two borders rotated 45 degrees. Generating them in CSS means the arrows are never selected or copied with the text, scale crisply, and recolour with one property — cleaner than slash characters or separator images.

Clicking … toggles an is-open class that fades and scales the menu in. A document click handler closes it when the click is outside the menu, using menu.contains to ignore inside clicks, and an Escape keydown also closes it. stopPropagation on the button keeps its own click from instantly triggering the outside-click close.

Render the crumbs from a path array and, when it exceeds a length, slice out the middle into the dropdown while keeping the first and last items visible. Hold an open boolean in state for the menu, and add document listeners for outside-click and Escape in a mount effect with cleanup. The chevron and menu CSS port unchanged.

Yes. While the Breadcrumb Dropdown snippet gives you one pattern to copy, the free Responsive Navbar Builder at webdevpuneet.com/navbar-builder/ designs a whole navigation bar: logo, links and dropdown menus, a mobile hamburger menu (dropdown panel, slide-in drawer or full screen) and a scroll effect (sticky, shrink, hide on scroll or transparent). It has six presets, a live preview that runs the real code, and exports HTML + CSS + vanilla JS, React, Tailwind, Vue 3 or Angular — or you can click Fork & Edit to keep editing it in My Code.