Burger

Burger (햄버거 버튼)

Burger 컴포넌트는 열기/닫기 상태를 나타내는 메뉴 버튼을 렌더링하는 컴포넌트예요. 모바일 내비게이션 토글 버튼으로 자주 사용해요.

출처: 문서

본문

Burger 컴포넌트는 열기/닫기 메뉴 버튼을 렌더링해요. opened와 onClick prop으로 컴포넌트 상태를 제어할 수 있어요. opened prop이 설정되어 있으면 X(닫기) 모양이 렌더링되고, 그렇지 않으면 햄버거 아이콘이 렌더링돼요.

import { useDisclosure } from '@mantine/hooks';
import { Burger } from '@mantine/core';

function Demo() {
  const [opened, { toggle }] = useDisclosure();
  return <Burger opened={opened} onClick={toggle} aria-label="Toggle navigation" />;
}

선(line) 크기 바꾸기

lineSize prop으로 햄버거 아이콘의 선 두께를 조절할 수 있어요.

import { useDisclosure } from '@mantine/hooks';
import { Burger } from '@mantine/core';

function Demo() {
  const [opened, { toggle }] = useDisclosure();
  return <Burger lineSize={2} size="xl" opened={opened} onClick={toggle} aria-label="Toggle navigation" />;
}

요소 ref 가져오기

useRef를 활용해 Burger 요소의 ref를 얻을 수 있어요.

import { useRef } from 'react';
import { Burger } from '@mantine/core';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <Burger ref={ref} />;
}

접근성 (Accessibility)

스크린 리더에서 Burger를 접근 가능하게 만들려면 aria-label을 설정하거나, VisuallyHidden 컴포넌트를 사용해야 해요.

import { Burger, VisuallyHidden } from '@mantine/core';

function Demo() {
  return (
    <>
      <Burger aria-label="Toggle navigation" />

      <Burger>
        <VisuallyHidden>Toggle navigation</VisuallyHidden>
      </Burger>
    </>
  );
}

더 알아보기 (Learn more)

• VisuallyHidden — 시각적으로는 숨기되 스크린 리더에는 읽히게 하는 컴포넌트
• useDisclosure — 열기/닫기 상태 관리 훅