Breadcrumbs

import React from 'react';
import { Breadcrumbs, Link, Typography } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <Breadcrumbs>
        <Link href='/' underline='hover'>Home</Link>
        <Link href='/about' underline='hover'>About</Link>
        <Link href='/services' underline='hover'>Services</Link>
        <Typography>Blog</Typography>
      </Breadcrumbs>
    </div>
  );
}

import React from 'react';
import { Breadcrumbs, Link, Typography } from 'archi-ui'
import { ChevronRight } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <Breadcrumbs separator='-'>
        <Link href='/' underline='hover'>Home</Link>
        <Link href='/about' underline='hover'>About</Link>
        <Link href='/services' underline='hover'>Services</Link>
        <Typography>Blog</Typography>
      </Breadcrumbs>
      <Breadcrumbs separator={<ChevronRight />}>
        <Link href='/' underline='hover'>Home</Link>
        <Link href='/about' underline='hover'>About</Link>
        <Link href='/services' underline='hover'>Services</Link>
        <Typography>Blog</Typography>
      </Breadcrumbs>
    </div>
  );
}

import React from 'react';
import { Breadcrumbs, Link, Typography } from 'archi-ui'
import { Home, ServerIcon, TreePalm, User } from 'lucide-react'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center gap-2'>
      <Breadcrumbs>
        <Link href='/' underline='hover' className='flex gap-2'>
          <Home />
          Home
        </Link>
        <Link href='/about' underline='hover' className='flex gap-2'>
          <User />
          About
        </Link>
        <Link href='/services' underline='hover' className='flex gap-2'>
          <ServerIcon />
          Services
        </Link>
        <Typography className='flex gap-2'>
          <TreePalm />
          Blog
        </Typography>
      </Breadcrumbs>
    </div>
  );
}

import React from 'react';
import { Breadcrumbs, Link, Typography } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className="flex items-center justify-center gap-2">
      <Breadcrumbs itemsAfterCollapse={2} itemsBeforeCollapse={2} maxItems={4}>
        <Link href='/' underline='hover'>Home</Link>
        <Link href='/about' underline='hover'>About</Link>
        <Link href='/services' underline='hover'>Services</Link>
        <Link href='/blog' underline='hover'>Blog</Link>
        <Link href='/catalog' underline='hover'>Catalog</Link>
        <Link href='/new-collection' underline='hover'>New Collection</Link>
        <Typography>Belts</Typography>
      </Breadcrumbs>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Breadcrumbs, IconButton, Menu, MenuItem, Link } from 'archi-ui';
import { Ellipsis } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
 
  const handleClick = (event) => {
    if(event) {
      setAnchorEl(event.currentTarget);
    }
  }
 
  const handleClose = () => {
    setAnchorEl(null);
  }
 
  return (
    <div className="flex items-center justify-center gap-2">
      <Menu open={open} onClose={handleClose} anchorEl={anchorEl}>
        <MenuItem divider onClick={handleClose}>Breadcrumbs 2</MenuItem>
        <MenuItem divider onClick={handleClose}>Breadcrumbs 3</MenuItem>
        <MenuItem divider onClick={handleClose}>Breadcrumbs 4</MenuItem>
      </Menu>
      <Breadcrumbs>
        <Link href='#'>Breadcrumb 1</Link>
        <IconButton onClick={handleClick}>
          <Ellipsis size={16} />
        </IconButton>
        <Link href='#'>Breadcrumb 5</Link>
        <Link href='#'>Breadcrumb 6</Link>
      </Breadcrumbs>
    </div>
  );
}