SOROUSH.DESIGN
Design SystemMarkdownStyled System

Breadcrumbs

The trail of links from a site's root to the current page, so a page shows where it sits and every ancestor is one click away.

Source

The trail of links from a site's root to the current page, so a page shows where it sits and every ancestor is one click away. A nav landmark named by aria-label, its crumbs an ordered list with a separator between two; past maxItems the trail collapses to its first and last crumbs and a button that shows them all.

The crumbs are yours - a Link for each ancestor, and the current page as Typography or a Link marked aria-current="page". The trail lays them out, separates and collapses them; it styles none of them, so a router's link drops in as a crumb.

import { Breadcrumbs } from '@soroush.tech/design-system/Breadcrumbs'
import { Link } from '@soroush.tech/design-system/Link'
import { Typography } from '@soroush.tech/design-system/Typography'

;<Breadcrumbs aria-label="Breadcrumb" expandLabel="Show path">
  <Link href="/" underline="hover" color="inherit">
    Home
  </Link>
  <Link href="/catalog" underline="hover" color="inherit">
    Catalog
  </Link>
  <Typography color="primary" aria-current="page">
    Accessories
  </Typography>
</Breadcrumbs>

Examples

Default

<Breadcrumbs expandLabel="Show path" aria-label="Breadcrumb" />

Current Page Link

const args: Partial<BreadcrumbsProps> = { expandLabel: 'Show path', 'aria-label': 'Breadcrumb' }

<Breadcrumbs {...args}>
  {ancestor('Home')}
  {ancestor('Catalog')}
  <Link href="#" underline="hover" color="primary" aria-current="page">
    Accessories
  </Link>
</Breadcrumbs>

Custom Separators

const args: Partial<BreadcrumbsProps> = { 'aria-label': 'Breadcrumb', expandLabel: 'Show path' }

<Flex gap={2}>
  {Object.entries({ '›': '›', '-': '-', chevron }).map(([name, separator]) => (
    <Breadcrumbs key={name} {...args} separator={separator}>
      {ancestor('Home')}
      {ancestor('Catalog')}
      {current('Accessories')}
    </Breadcrumbs>
  ))}
</Flex>

With Icons

const args: Partial<BreadcrumbsProps> = { expandLabel: 'Show path', 'aria-label': 'Breadcrumb' }

<Breadcrumbs {...args}>
  {ancestor(withIcon('folder', 'Projects'))}
  {ancestor(withIcon('code', 'design-system'))}
  {current(withIcon('grid_view', 'Breadcrumbs'))}
</Breadcrumbs>

Collapsed

const args: Partial<BreadcrumbsProps> = { maxItems: 2, expandLabel: 'Show path', 'aria-label': 'Breadcrumb' }

<Breadcrumbs {...args}>
  {shop.map((label) => (
    <Link key={label} href="#" underline="hover" color="inherit">
      {label}
    </Link>
  ))}
  {current('Belts')}
</Breadcrumbs>

Condensed With Menu

const args: Partial<BreadcrumbsProps> = { expandLabel: 'Show path', 'aria-label': 'Breadcrumb' }

<Breadcrumbs {...args}>
  {ancestor('Home')}
  <Menu
    aria-label="Hidden crumbs"
    trigger={
      <Button variant="text" size="sm" aria-label="Show the hidden crumbs">
        <Icon name="more_horiz" size="sm" color="inherit" />
      </Button>
    }
  >
    {['Catalog', 'Accessories', 'New collection'].map((label) => (
      <MenuItem key={label}>{label}</MenuItem>
    ))}
  </Menu>
  {current('Belts')}
</Breadcrumbs>

Customized

const args: Partial<BreadcrumbsProps> = { 'aria-label': 'Breadcrumb', expandLabel: 'Show path' }

<ThemeProvider theme={customized}>
  <Breadcrumbs aria-label={args['aria-label']}>
    {ancestor('Home')}
    {ancestor('Catalog')}
    {current('Accessories')}
  </Breadcrumbs>
</ThemeProvider>

Right To Left

const args: Partial<BreadcrumbsProps> = { expandLabel: 'Show path', 'aria-label': 'Breadcrumb' }

<View dir="rtl">
  <Breadcrumbs {...args}>
    {ancestor('خانه')}
    {ancestor('فروشگاه')}
    {current('لوازم جانبی')}
  </Breadcrumbs>
</View>