Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

WARNING: This component is in
Draft
status. This means that it is still in development and may have bugs or missing features. It is not intended to be used in production. You may use it for testing purposes.

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add breadcrumb
import { PropsOf, Slot, component$ } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
import { LuChevronRight } from '@qwikest/icons/lucide';
 
export type BreadcrumbProps = PropsOf<'nav'>;
const Breadcrumb = component$<BreadcrumbProps>(() => {
  return (
    <nav aria-label="breadcrumb">
      <Slot />
    </nav>
  );
});
 
type BreadcrumbListProps = PropsOf<'ol'>;
const BreadcrumbList = component$<BreadcrumbListProps>((props) => {
  return (
    <ol
      class={cn(
        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
        props.class,
      )}
      {...props}
    >
      <Slot />
    </ol>
  );
});
 
type BreadcrumbItemProps = PropsOf<'li'>;
const BreadcrumbItem = component$<BreadcrumbItemProps>((props) => {
  return (
    <li class={cn('inline-flex items-center gap-1.5', props.class)} {...props}>
      <Slot />
    </li>
  );
});
 
type BreadcrumbLinkProps = PropsOf<'a'> & { asChild?: boolean };
const BreadcrumbLink = component$<BreadcrumbLinkProps>((props) => {
  const Comp = props.asChild ? Slot : 'a';
  return (
    <Comp class={cn('transition-colors hover:text-foreground', props.class)} {...props}>
      {!props.asChild && <Slot />}
    </Comp>
  );
});
 
type BreadcrumbSeparatorProps = PropsOf<'li'>;
const BreadcrumbSeparator = component$<BreadcrumbSeparatorProps>((props) => {
  return (
    <li
      role="presentation"
      aria-hidden="true"
      class={cn('[&>svg]:size-3.5', props.class)}
      {...props}
    >
      <LuChevronRight />
    </li>
  );
});
 
type BreadcrumbPageProps = PropsOf<'span'>;
const BreadcrumbPage = component$<BreadcrumbPageProps>((props) => {
  return (
    <span
      role="link"
      aria-disabled="true"
      aria-current="page"
      class={cn('font-normal text-foreground', props.class)}
      {...props}
    >
      <Slot />
    </span>
  );
});
 
export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbSeparator,
  BreadcrumbPage,
};

Usage

import { Breadcrumb } from '@qwik-ui/styled';
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>