Breadcrumb

Navigation aid that displays the current page's location within a hierarchy.

Basic

Show code
Hide code
 
import { Breadcrumb } from '@mylighthouse/prism-react';

export default function BreadcrumbBasic(): React.ReactElement {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="#">Page title</Breadcrumb.Item>
      <Breadcrumb.Item href="#">Page title</Breadcrumb.Item>
      <Breadcrumb.Item isCurrent>Current page</Breadcrumb.Item>
    </Breadcrumb>
  );
}

Overflowing content

Page links have a max-width of 150px to prevent links wrapping to a second line.

Show code
Hide code
 
import { Breadcrumb } from '@mylighthouse/prism-react';

export default function BreadcrumbOverflow(): React.ReactElement {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="#">Page title</Breadcrumb.Item>
      <Breadcrumb.Item href="#">
        Very loooooooooooooooong page title
      </Breadcrumb.Item>
      <Breadcrumb.Item href="#">Page title</Breadcrumb.Item>
      <Breadcrumb.Item isCurrent>Current page</Breadcrumb.Item>
    </Breadcrumb>
  );
}

Breadcrumb

No component-specific props

Breadcrumb.Item

Name Default Type Description
href -- string --
isCurrent -- boolean --