Breadcrumbs React Component

Breadcrumbs allow users to keep track and maintain awareness of their locations within the app or website. They should be used for large sites and apps with hierarchically arranged pages.

There are following components included:

  • Breadcrumbs
  • BreadcrumbsItem
  • BreadcrumbsSeparator
  • BreadcrumbsCollapsed
NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

fontSizeIosstring'text-[17px]'

Font size in iOS theme

fontSizeMaterialstring'text-[16px]'

Font size in Material theme

NameTypeDefaultDescription
activebooleanfalse

Marks breadcrumb item as active/current (usually last item in breadcrumbs)

colorsobject

Object with Tailwind CSS colors classes

colors.textstring'text-black text-opacity-55 dark:text-white dark:text-opacity-55'

Breadcrumbs item text color

colors.textActivestring'text-black dark:text-white'

Breadcrumbs active item text color

componentstring'div'

Component's HTML Element

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgstring'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15'

Collapsed bg color

colors.dotBgstring'bg-black dark:bg-white'

Collapsed "dot" bg color

componentstring'div'

Component's HTML Element

Examples

Breadcrumbs.jsx
import React, { useRef, useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
BlockHeader,
Block,
Breadcrumbs,
BreadcrumbsItem,
BreadcrumbsSeparator,
BreadcrumbsCollapsed,
Popover,
List,
ListItem,
Link,
} from 'konsta/react';
export default function BreadcrumbsPage() {
const isPreview = document.location.href.includes('examplePreview');
const popoverTargetRef = useRef(null);
const [popoverOpened, setPopoverOpened] = useState(false);
return (
<Page>
<Navbar
title="Breadcrumbs"
/>
<Block strong>
Breadcrumbs allow users to keep track and maintain awareness of their
locations within the app or website. They should be used for large sites
and apps with hierarchically arranged pages.
</Block>
<BlockTitle>Basic</BlockTitle>
<Block strong>
<Breadcrumbs>
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Home</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Catalog</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem active>Phones</BreadcrumbsItem>
</Breadcrumbs>
</Block>
<BlockTitle>Scrollable</BlockTitle>
<BlockHeader>
Breadcrumbs will be scrollable if they don't fit the screen
</BlockHeader>
<Block strong>
<Breadcrumbs>
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Home</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Catalog</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Phones</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Apple</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
</Breadcrumbs>
</Block>
<BlockTitle>Collapsed</BlockTitle>
<Block strong>
<Breadcrumbs>
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Home</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsCollapsed
ref={popoverTargetRef}
onClick={() => setPopoverOpened(true)}
/>
<BreadcrumbsSeparator />
<BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
</Breadcrumbs>
</Block>
<Popover
opened={popoverOpened}
className="breadcrumbs-popover"
style={{ width: '120px' }}
target={popoverTargetRef.current}
onBackdropClick={() => setPopoverOpened(false)}
>
<List nested hairlines={false} colors={{ bg: 'bg-transparent' }}>
<ListItem
link
title="Catalog"
onClick={() => setPopoverOpened(false)}
/>
<ListItem
link
title="Phones"
onClick={() => setPopoverOpened(false)}
/>
<ListItem
link
title="Apple"
onClick={() => setPopoverOpened(false)}
/>
</List>
</Popover>
</Page>
);
}
Code licensed under MIT.
2021 © Konsta UI by nolimits4web.