1. Primitive UI components

Breadcrumb

Primitive UI components in Search UI Components package, are headless, building blocks used to create the headless widget templates for React applications. You can use them to scaffold your custom widgets.

This topic describes the anatomy, API reference, and variations of the Breadcrumb primitive component.

Anatomy

import { Breadcrumb } from '@sitecore-search/ui';

const MyBreadcrumbComponent = () => (
    <Breadcrumb.Root>
        <Breadcrumb.Navigation>
            <Breadcrumb.List>
                <Breadcrumb.Item>
                    <Breadcrumb.Link href="#">
                        Item 1
                    </Breadcrumb.Link>
                    <Breadcrumb.Separator value="/"></Breadcrumb.Separator>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                    <Breadcrumb.Link aria-current='page' href="#">
                        Item 2
                    </Breadcrumb.Link>
                </Breadcrumb.Item>
            </Breadcrumb.List>
        <Breadcrumb.Navigation>
    </Breadcrumb.Root>
);

Using the component

The following tabs describe use of theBreadcrumb primitive component.

Plain component

In your React application, paste the following code block then modify the primitives to match your needs.

Screenshot of a plain Breadcrumb primitive component.
() => {
  return (
    <Breadcrumb.Root>
      <Breadcrumb.Navigation>
        <Breadcrumb.List>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#" onClick={(e) => e.preventDefault()}>
              Item 1
            </Breadcrumb.Link>
            <Breadcrumb.Separator></Breadcrumb.Separator>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <Breadcrumb.Link href="#" onClick={(e) => e.preventDefault()}>
              Item 2
            </Breadcrumb.Link>
          </Breadcrumb.Item>
        </Breadcrumb.List>
      </Breadcrumb.Navigation>
    </Breadcrumb.Root>
  );
}

With separators

In your React application, paste the following code block then modify the primitives to match your needs.

Screenshot of a Breadcrumb primitive component with separators.
() => {
  const StyledRoot = styled(Breadcrumb.Root)``;

  const StyledList = styled(Breadcrumb.List)`
    display: flex;
    list-style: none;
  `;

  const StyledLink = styled(Breadcrumb.Link)`
    text-decoration: none;
    color: ${theme.vars.palette.primary.main};
    &:hover {
      text-decoration: none;
      color: ${theme.vars.palette.primary.light};
    }
    &:focus {
      text-decoration: none;
      color: ${theme.vars.palette.primary.light};
    }
    &[data-disabled] {
      color: ${theme.vars.palette.grey['400']};
      pointer-events: none;
    }
  `;
  const StyledSeparator = styled(Breadcrumb.Separator)`
    margin: auto ${theme.vars.spacing.xs};
  `;

  return (
    <StyledRoot>
      <Breadcrumb.Navigation>
        <StyledList>
          <Breadcrumb.Item>
            <StyledLink href="#" onClick={(e) => e.preventDefault()}>
              Link 1
            </StyledLink>
            <StyledSeparator value=">"></StyledSeparator>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <StyledLink href="#" onClick={(e) => e.preventDefault()} disabled={true}>
              Link 2
            </StyledLink>
          </Breadcrumb.Item>
        </StyledList>
      </Breadcrumb.Navigation>
    </StyledRoot>
  );
}

With disabled items

In your React application, paste the following code block then modify the primitives to match your needs.

Screenshot of Breadcrumb primitive component with disabled items.
() => {
  const StyledRoot = styled(Breadcrumb.Root)``;

  const StyledList = styled(Breadcrumb.List)`
    display: flex;
    list-style: none;
  `;

  const StyledLink = styled(Breadcrumb.Link)`
    text-decoration: none;
    color: ${theme.vars.palette.primary.main};
    &:hover {
      text-decoration: none;
      color: ${theme.vars.palette.primary.light};
    }
    &:focus {
      text-decoration: none;
      color: ${theme.vars.palette.primary.light};
    }
    &[data-disabled] {
      color: ${theme.vars.palette.grey['400']};
      pointer-events: none;
    }
  `;
  const StyledSeparator = styled(Breadcrumb.Separator)`
    margin: auto ${theme.vars.spacing.xs};
  `;

  return (
    <StyledRoot>
      <Breadcrumb.Navigation>
        <StyledList>
          <Breadcrumb.Item>
            <StyledLink href="#" onClick={(e) => e.preventDefault()}>
              Link 1
            </StyledLink>
            <StyledSeparator value=">"></StyledSeparator>
          </Breadcrumb.Item>
          <Breadcrumb.Item>
            <StyledLink href="#" onClick={(e) => e.preventDefault()} disabled={true}>
              Link 2
            </StyledLink>
          </Breadcrumb.Item>
        </StyledList>
      </Breadcrumb.Navigation>
    </StyledRoot>
  );
}

API reference

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

  • Components to which you can add it as a child.
  • Components you can add as its child.
  • Details of any properties you can set.

The Breadcrumb.Root component contains all the breadcrumbs.

Children: Breadcrumb.Navigation

NameDescription
articleThe article object

The Breadcrumb.Navigation component represents the nav HTML element. A nav element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.

Parent: Breadcrumb.Root

Children: Breadcrumb.List

The Breadcrumb.List component is an ol(ordered list) HTML element.

Parent: Breadcrumb.Root

Children: Breadcrumb.Item

The Breadcrumb.Item component lists an item's content using links and separators.

Parent: Breadcrumb.List

Children: Breadcrumb.Link and Breadcrumb.Separator.

The Breadcrumb.Link component is an anchor HTML element.

Parent: Breadcrumb.Item

The Breadcrumb.Separator component separates breadcrumb items. It is an empty element by default. The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.

Parent: Breadcrumb.Item

NameDescription
valueString value of the separator.

API reference

The Breadcrumb.Root component contains all the breadcrumbs.

Children: Breadcrumb.Navigation

The Breadcrumb.Navigation component represents nav HTML element. A nav element labeled Breadcrumb identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.

Parent: Breadcrumb.Root

Children: Breadcrumb.List

The Breadcrumb.List component is an ol(ordered list) HTML element.

Parent: Breadcrumb.Root

Children: Breadcrumb.Item

The Breadcrumb.Item component lists an item's content using links and separators.

Parent: Breadcrumb.List

Children: Breadcrumb.Link, and Breadcrumb.Separator

The Breadcrumb.Link component is an anchor HTML element.

Parent: Breadcrumb.Item

The Breadcrumb.Separator component separates breadcrumb items. It is an empty element by default. The separators are part of the visual presentation that signifies the breadcrumb trail, which is already semantically represented by the nav element with its label of Breadcrumb. So, using a display technique that is not represented in the accessibility tree used by screen readers prevents redundant and potentially distracting verbosity.

Parent: Breadcrumb.Item

NameDescription
valueValue of the separator.
If you have suggestions for improving this article, let us know!