MUI Breadcrumbs

빈 Breadcrumb 하나가 중간에 삽입되는 오류를 고치고 있다. Breadcrumbs가 무엇인지는 알고 있었지만 프로젝트에서 써 본 적이 없어서 개념부터 정리해 봤다!

Breadcrumbs의 정의

Breadcrumbs는 웹사이트의 계층적 구조 안에서 유저가 페이지의 위치를 시각적으로 파악하는 것을 돕는 링크들의 리스트다. 또, 해당 페이지의 모든 조상으로의 이동을 가능하게 한다.

 

내가 블로그 글을 쓰는 경로를 예로 들자면(현재 티스토리에서 제공되는 기능은 아니지만) 상단에 티스토리 홈 > 블로그 설정 > 글쓰기와 같은 링크들의 연결고리가 적혀 있다면 breadcrumbs다. 헨젤과 그레텔이 빵가루를 떨어뜨려 길을 찾으려고 했던 것이 생각나는 귀여운 작명이다 ㅎㅎ

 

기본 형태

import * as React from 'react';
import Typography from '@mui/material/Typography';
import Breadcrumbs from '@mui/material/Breadcrumbs';
import Link from '@mui/material/Link';

function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
  event.preventDefault();
  console.info('You clicked a breadcrumb.');
}

export default function BasicBreadcrumbs() {
  return (
    <div role="presentation" onClick={handleClick}>
      <Breadcrumbs aria-label="breadcrumb">
        <Link underline="hover" color="inherit" href="/">
          MUI
        </Link>
        <Link
          underline="hover"
          color="inherit"
          href="/material-ui/getting-started/installation/"
        >
          Core
        </Link>
        <Typography color="text.primary">Breadcrumbs</Typography>
      </Breadcrumbs>
    </div>
  );
}

Breadcrumbs의 기본 구조다. 우선 Breadcrumbs 태그를 맨 밖에 넣고, 그 안에 링크 태그들을 원하는 만큼 넣으면 된다. 링크는 href로 지정하고, 현재는 event에 prevent가 걸려 있고 대신 콘솔로 출력만 된다. 예시에서는 현재 위치하고 있다는 것을 말해주기 위해 'Breadcrumbs' 요소를 Typography 태그 안에 넣었는데, 실제로는 이렇게 사용되지는 않을 것이다.

 

separator인 슬래쉬(/)는 따로 삽입할 필요는 없고, Breadcrumbs 내부라면 자동으로 삽입된다. separator 인자를 사용해 커스텀도 가능하다. 뿐만 아니라 각 breadcrumb들의 모양도 커스텀 가능하며, 중간을 ...으로 만들고 클릭하면 해체되는 collapsed 버전도 있다.

 

 

https://mui.com/material-ui/react-breadcrumbs/

React Breadcrumbs component - Material UI