NavLink

NavLink

네비게이션 링크를 나타내는 다형성 컴포넌트예요. 사용자 정의 가능한 네비게이션 링크를 만들어요.

출처: 문서

본문

사용법 (Usage)

NavLink로 네비게이션 링크를 만들어요. icon(좌측 아이콘), rightSection(우측 섹션), description(설명), disabled, active, variant 등의 prop을 지원해요.

import { Badge, NavLink } from '@mantine/core';
import { HouseIcon, GaugeIcon, CaretRightIcon, HeartbeatIcon, ProhibitIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <>
      <NavLink label="Dashboard" leftSection={<HouseIcon size={16} />} />
      <NavLink label="Security" rightSection={<CaretRightIcon size={16} />} />
      <NavLink label="Disabled" leftSection={<ProhibitIcon size={16} />} disabled />
      <NavLink
        label="Item with description"
        description="Additional information"
        rightSection={<Badge size="xs" variant="filled">3</Badge>}
      />
      <NavLink label="Active subtle" rightSection={<CaretRightIcon size={16} />} variant="subtle" active />
      <NavLink label="Active light" rightSection={<CaretRightIcon size={16} />} active />
      <NavLink label="Active filled" rightSection={<CaretRightIcon size={16} />} variant="filled" active />
    </>
  );
}

활성 상태 (Active)

active prop을 설정하면 NavLink에 활성 상태 스타일이 추가돼요.

renderRoot 안에서 React Router의 NavLink를 사용한다면, 활성 상태 스타일은 React Router가 설정하는 aria-current 속성에 기반하므로 active prop을 명시적으로 설정할 필요가 없어요.

color와 variant prop으로 활성 상태 스타일을 커스터마이즈할 수 있어요.

import { useState } from 'react';
import { GaugeIcon, FingerprintIcon, HeartbeatIcon, CaretRightIcon } from '@phosphor-icons/react';
import { Box, NavLink } from '@mantine/core';

const data = [
  { icon: GaugeIcon, label: 'Dashboard', description: 'Item with description' },
  { icon: FingerprintIcon, label: 'Security', rightSection: <CaretRightIcon size={16} /> },
  { icon: HeartbeatIcon, label: 'Activity' },
];

function Demo() {
  const [active, setActive] = useState(0);

  const items = data.map((item, index) => (
    <NavLink
      key={item.label}
      active={index === active}
      label={item.label}
      description={item.description}
      leftSection={<item.icon size={16} />}
      onClick={() => setActive(index)}
    />
  ));

  return <Box w={220}>{items}</Box>;
}

autoContrast

NavLink은 autoContrast prop과 theme.autoContrast를 지원해요. NavLink 또는 테마에 autoContrast가 설정되면 color prop에 지정된 값과 충분한 대비가 있도록 콘텐츠 색상이 조정돼요.

autoContrast 기능은 color prop으로 배경색을 변경할 때만 동작해요. autoContrast는 filled variant에서만 동작해요.

import { NavLink } from '@mantine/core';

function Demo() {
  return (
    <>
      <NavLink label="Default" active variant="filled" color="blue" />
      <NavLink label="Auto contrast" active variant="filled" color="blue" autoContrast />
    </>
  );
}

중첩 NavLink (Nested NavLinks)

중첩 링크를 만들려면 다른 NavLink의 children으로 NavLink을 넣어요.

import { NavLink } from '@mantine/core';
import { GaugeIcon, FingerprintIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <>
      <NavLink label="First parent link" childrenOffset={28}>
        <NavLink label="First child link" />
        <NavLink label="Second child link" />
        <NavLink label="Third child link" />
      </NavLink>
      <NavLink label="Second parent link" childrenOffset={28} defaultOpened>
        <NavLink label="First child link" />
        <NavLink label="Second child link" />
      </NavLink>
    </>
  );
}

다형성 컴포넌트 (Polymorphic component)

NavLink은 다형성 컴포넌트예요. 기본 루트 요소는 a이지만, component prop으로 다른 요소나 컴포넌트로 바꿀 수 있어요.

import { NavLink } from '@mantine/core';

function Demo() {
  return <NavLink component="button" label="Home" />;
}

component prop에는 예를 들어 Next.js의 Link 같은 컴포넌트도 사용할 수 있어요.

import Link from 'next/link';
import { NavLink } from '@mantine/core';

function Demo() {
  return <NavLink component={Link} href="/" label="Home" />;
}

TypeScript와 다형성 컴포넌트 (Polymorphic components with TypeScript)

다형성 컴포넌트의 prop 타입은 일반 컴포넌트와 달라요. 기본 요소의 HTML 요소 prop을 확장하지 않아요. 예를 들어 NavLinkProps는 a가 기본 요소임에도 React.ComponentProps<'a'>를 확장하지 않아요.

다형성이 아닌 다형성 컴포넌트의 래퍼를 만들려면 컴포넌트 prop 인터페이스가 HTML 요소 prop을 확장해야 해요. 예:

import type { NavLinkProps, ElementProps } from '@mantine/core';

interface MyNavLinkProps extends NavLinkProps<'a'>, ElementProps<'a'> {}

래핑 후에도 컴포넌트가 다형성으로 유지되게 하려면 이 가이드에서 설명하는 polymorphic 함수를 사용해요.

요소 ref 가져오기 (Get element ref)

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

function Demo() {
  const ref = useRef<HTMLAnchorElement>(null);
  return <NavLink ref={ref} label="Home" />;
}

더 알아보기 (Learn more)

• Burger
• Pagination
• 다형성 컴포넌트 가이드