bakery_dining

Breadcrumb

Hierarchical navigation trail for pages.

Breadcrumb Examples

Copy-ready examples with live previews.

Basic usage

Provide a pathname (or full URL) and Breadcrumb will generate the steps.

Live preview

import Breadcrumb from "@/_components/breadcrumb/Breadcrumb";

export default function Example() {
  return <Breadcrumb wholeUrl="/dashboard/settings/profile" />;
}

Using window.location.href

Useful when you want to build breadcrumb from the current URL.

• This component is client-only. If you need SSR, compute a pathname on the server and pass it as wholeUrl.

Live preview

import { useEffect, useState } from "react";
import Breadcrumb from "@/packages/ui/src/_components/breadcrumb/Breadcrumb";

export default function Example() {
  const [url, setUrl] = useState("/");

  useEffect(() => {
    setUrl(window.location.href);
  }, []);

  return <Breadcrumb wholeUrl={url} />;
}

Custom divider (string)

Change the divider displayed between steps.

Live preview

import Breadcrumb from "@/_components/breadcrumb/Breadcrumb";

export default function Example() {
  return <Breadcrumb wholeUrl="/dashboard/settings/profile" divider=">" />;
}

Custom divider (component)

You can pass a React component type as divider.

• Pass a component reference (not an element). Example: divider={ChevronDivider}.

Live preview

import Breadcrumb from "@/packages/ui/src/_components/breadcrumb/Breadcrumb";

const ChevronDivider = () => <span aria-hidden="true">›</span>;

export default function Example() {
  return <Breadcrumb wholeUrl="/dashboard/settings/profile" divider={ChevronDivider} />;
}

Query strings and hash fragments are ignored

Breadcrumb strips ?query and #hash before generating segments.

Live preview

import Breadcrumb from "@/_components/breadcrumb/Breadcrumb";

export default function Example() {
  return <Breadcrumb wholeUrl="/dashboard/settings/profile?tab=security#billing" />;
}

Controlled breadcrumb (dynamic path)

Example updating wholeUrl with local state (useful in playgrounds).

Live preview

import { useState } from "react";
import Breadcrumb from "@/packages/ui/src/_components/breadcrumb/Breadcrumb";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";

export default function Example() {
  const [path, setPath] = useState("/dashboard");

  return (
    <div style={{ display: "grid", gap: 12 }}>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
        <Button variant="secondary" ripple outline size="small" onClick={() => setPath("/dashboard")}>
          /dashboard
        </Button>

        <Button variant="secondary" ripple outline size="small" onClick={() => setPath("/dashboard/settings")}>
          /dashboard/settings
        </Button>

        <Button variant="secondary" ripple outline size="small" onClick={() => setPath("/dashboard/settings/profile")}>
          /dashboard/settings/profile
        </Button>

        <Button
          variant="secondary"
          ripple
          outline
          size="small"
          onClick={() => setPath("/dashboard/settings/profile?tab=security#top")}
        >
          with ?query#hash
        </Button>
      </div>

      <Breadcrumb wholeUrl={path} />
    </div>
  );
}

On this page

Breadcrumb Props

Breadcrumb — Props
Prop	Type	Required	Default	Description
wholeUrl	string	Yes	—	Full URL or pathname used to generate breadcrumb steps. Query strings and hash fragments are ignored.
divider	string \| React.ComponentType	No	"/"	Divider displayed between steps. You can pass a string (recommended) or a React component type.