Fusion UI

Overview

Breadcrumbs show the path from the top of the hierarchy to the current page. The order of the items is the nesting order.

Animals

...

Fish

Tuna

"use client";

import React from "react";
import {Breadcrumbs} from "@brynlabs/fusion-ui";

export const BreadcrumbsExample = () => (
  <Breadcrumbs
    breadcrumbs={[
      {
        title: "Animals",
        href: "#",
      },
      {
        title: "Fish",
        href: "#",
      },
      {
        title: "Tuna",
        href: "#",
      },
    ]}
  />
);

Overflow

When space runs out, middle items collapse into a menu and long titles are shortened in the middle, with the full title in a tooltip. Drag the handle to try it.

...

"use client";

import React, {useEffect, useRef, useState} from "react";
import {Breadcrumbs} from "@brynlabs/fusion-ui";

export const BreadcrumbsOverflowExample = () => {
  const wrapperRef = useRef<HTMLDivElement>(null);

  const [width, setWidth] = useState(600);
  const [maxWidth, setMaxWidth] = useState(600);

  const breadcrumbs = Array.from({length: 7}, (_, i) => ({
    title: `Breadcrumb ${i + 1}`,
    href: "/components/breadcrumbs",
  }));

  useEffect(() => {
    const element = wrapperRef.current;
    if (!element) return;

    const updateMaxWidth = () => {
      const parent = element.parentElement;
      if (!parent) return;

      const parentStyles = window.getComputedStyle(parent);
      const parentPaddingLeft = parseFloat(parentStyles.paddingLeft) || 0;
      const parentPaddingRight = parseFloat(parentStyles.paddingRight) || 0;

      const availableWidth = parent.clientWidth - parentPaddingLeft - parentPaddingRight;

      setMaxWidth(availableWidth);
      setWidth(prev => Math.min(prev, availableWidth));
    };

    updateMaxWidth();

    const observer = new ResizeObserver(() => {
      updateMaxWidth();
    });

    if (element.parentElement) {
      observer.observe(element.parentElement);
    }

    return () => observer.disconnect();
  }, []);

  return (
    <div ref={wrapperRef} style={{display: "grid", gap: "16px", width: "100%", minWidth: 0}}>
      <input
        id="breadcrumbs-width-slider"
        type="range"
        min={0}
        max={Math.floor(maxWidth)}
        step={10}
        value={Math.min(width, maxWidth)}
        onChange={event => setWidth(Number(event.target.value))}
        style={{width: "100%", minWidth: 0, appearance: "auto"}}
      />

      <div
        style={{
          width: `${width}px`,
          maxWidth: "100%",
          border: "1px dashed gray",
          padding: "8px",
          overflow: "hidden",
          boxSizing: "border-box",
          minWidth: 0,
        }}>
        <Breadcrumbs breadcrumbs={breadcrumbs} />
      </div>
    </div>
  );
};