import * as React from 'react';
import { Box } from '@mui/material';
import { HiChevronRight } from 'react-icons/hi';
// Render labels with links and an icon delimiter
export default function BreadcrumSimpleChevron({ items = [
    {
        label: 'Home',
        href: '#',
    },
    {
        label: 'Workspaces',
        href: '#',
    },
    {
        label: 'My First Workspace',
    },
], }) {
    return (<Box sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            fontSize: 'sm',
            fontWeight: 500,
            color: 'gray.500',
        }}>
      {items.map((item, index) => {
            return (<Box component='a' href={item.href} key={index} sx={{
                    color: 'gray.500',
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                    textDecoration: 'none',
                }}>
            {item.label}
            {index !== items.length - 1 && <HiChevronRight />}
          </Box>);
        })}
    </Box>);
}


import * as React from 'react';
import { Box } from '@mui/material';
import { HiChevronRight } from 'react-icons/hi';
// Render labels with links and an icon delimiter
export default function BreadcrumSimpleChevron({
  items = [
    {
      label: 'Home',
      href: '#',
    },
    {
      label: 'Workspaces',
      href: '#',
    },
    {
      label: 'My First Workspace',
    },
  ],
}: {
  items: {
    label: string;
    href?: string;
  }[];
}) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        fontSize: 'sm',
        fontWeight: 500,
        color: 'gray.500',
      }}
    >
      {items.map((item, index) => {
        return (
          <Box
            component='a'
            href={item.href}
            key={index}
            sx={{
              color: 'gray.500',
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
              textDecoration: 'none',
            }}
          >
            {item.label}
            {index !== items.length - 1 && <HiChevronRight />}
          </Box>
        );
      })}
    </Box>
  );
}


import * as React from 'react';
import { Box } from '@mui/material';
import { HiChevronRight, HiHome } from 'react-icons/hi';
// Render labels with links and an icon delimiter
export default function BreadcrumSimpleChevron({ items = [
    {
        icon: <HiHome />,
        label: 'Home',
        href: '#',
    },
    {
        label: 'Workspaces',
        href: '#',
    },
    {
        label: 'My First Workspace',
    },
], }) {
    return (<Box sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            fontSize: 'sm',
            fontWeight: 500,
        }}>
      {items.map((item, index) => {
            return (<Box component='a' href={item.href} key={index} sx={{
                    color: 'gray.500',
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                    textDecoration: 'none',
                }}>
            {item.icon && item.icon}
            {item.label}
            {index !== items.length - 1 && <HiChevronRight />}
          </Box>);
        })}
    </Box>);
}


import * as React from 'react';
import { Box } from '@mui/material';
import { HiChevronRight, HiHome } from 'react-icons/hi';
// Render labels with links and an icon delimiter
export default function BreadcrumSimpleChevron({
  items = [
    {
      icon: <HiHome />,
      label: 'Home',
      href: '#',
    },
    {
      label: 'Workspaces',
      href: '#',
    },
    {
      label: 'My First Workspace',
    },
  ],
}: {
  items: {
    label: string;
    href?: string;
    icon?: React.ReactNode;
  }[];
}) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        fontSize: 'sm',
        fontWeight: 500,
      }}
    >
      {items.map((item, index) => {
        return (
          <Box
            component='a'
            href={item.href}
            key={index}
            sx={{
              color: 'gray.500',
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
              textDecoration: 'none',
            }}
          >
            {item.icon && item.icon}
            {item.label}
            {index !== items.length - 1 && <HiChevronRight />}
          </Box>
        );
      })}
    </Box>
  );
}


import * as React from 'react';
import { Box } from '@mui/material';
// Render labels with links and a slash delimiter
export default function BreadcrumSimpleChevron({ items = [
    {
        label: 'Home',
        href: '#',
    },
    {
        label: 'Workspaces',
        href: '#',
    },
    {
        label: 'My First Workspace',
    },
], }) {
    return (<Box sx={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            fontSize: 'sm',
            fontWeight: 500,
            color: 'gray.500',
        }}>
      {items.map((item, index) => {
            return (<Box component='a' href={item.href} key={index} sx={{
                    color: 'gray.500',
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    gap: 1,
                    textDecoration: 'none',
                }}>
            {item.label}
            {index !== items.length - 1 && <Box>/</Box>}
          </Box>);
        })}
    </Box>);
}


import * as React from 'react';
import { Box } from '@mui/material';
// Render labels with links and a slash delimiter
export default function BreadcrumSimpleChevron({
  items = [
    {
      label: 'Home',
      href: '#',
    },
    {
      label: 'Workspaces',
      href: '#',
    },
    {
      label: 'My First Workspace',
    },
  ],
}: {
  items: {
    label: string;
    href?: string;
  }[];
}) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        fontSize: 'sm',
        fontWeight: 500,
        color: 'gray.500',
      }}
    >
      {items.map((item, index) => {
        return (
          <Box
            component='a'
            href={item.href}
            key={index}
            sx={{
              color: 'gray.500',
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
              textDecoration: 'none',
            }}
          >
            {item.label}
            {index !== items.length - 1 && <Box>/</Box>}
          </Box>
        );
      })}
    </Box>
  );
}


Breadcrumbs

Simple with chevron

With icons

Simple with slashes