Breadcrumbs

Public pages: place UjBreadcrumbBar between the site header and page content. It owns the full-width surface, border and aligned uj-container.

Governed containers: use UjBreadcrumbs directly when a page header, hero or administration shell already owns the surface and content alignment.

Both forms use the same semantic ordered list, link treatment, current-page state, responsive reflow and design tokens. Pass the real route hierarchy in order; do not infer browsing history or hide intermediate items. Use accessibleLabel to expand an unfamiliar abbreviation such as CBE, and use lang or dir only when the item differs from its page context.

<UjBreadcrumbBar
  items={[
    { href: "/", label: "Home" },
    { href: "/faculties", label: "Faculties" },
    {
      accessibleLabel: "CBE — College of Business and Economics",
      label: "CBE",
      lang: "en-ZA",
    },
  ]}
/>