NavLinkpolymorphic

Navigation link
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

import { Badge, Box, NavLink } from '@mantine/core';
import { IconHome2, IconGauge, IconChevronRight, IconActivity, IconCircleOff } from '@tabler/icons';


function Demo() {
  return (
    <Box sx={{ width: 240 }}>
      <NavLink label="With icon" icon={<IconHome2 size={16} stroke={1.5} />} />
      <NavLink
        label="With right section"
        icon={<IconGauge size={16} stroke={1.5} />}
        rightSection={<IconChevronRight size={12} stroke={1.5} />}
      />
      <NavLink label="Disabled" icon={<IconCircleOff size={16} stroke={1.5} />} disabled />
      <NavLink
        label="With description"
        description="Additional information"
        icon={
          <Badge size="xs" variant="filled" color="red" sx={{ width: 16, height: 16, padding: 0 }}>
            3
          </Badge>
        }
      />
      <NavLink
        label="Active subtle"
        icon={<IconActivity size={16} stroke={1.5} />}
        rightSection={<IconChevronRight size={12} stroke={1.5} />}
        variant="subtle"
        active
      />
      <NavLink
        label="Active light"
        icon={<IconActivity size={16} stroke={1.5} />}
        rightSection={<IconChevronRight size={12} stroke={1.5} />}
        active
      />
      <NavLink
        label="Active filled"
        icon={<IconActivity size={16} stroke={1.5} />}
        rightSection={<IconChevronRight size={12} stroke={1.5} />}
        variant="filled"
        active
      />
    </Box>
  );
}

Active

Set active prop to add active styles to NavLink. You can customize active styles with color and variant props:

Color
Variant
import { useState } from 'react';
import { IconGauge, IconFingerprint, IconActivity, IconChevronRight } from '@tabler/icons';
import { Box, NavLink } from '@mantine/core';


const data = [
  { icon: IconGauge, label: 'Dashboard', description: 'Item with description' },
  {
    icon: IconFingerprint,
    label: 'Security',
    rightSection: <IconChevronRight size={14} stroke={1.5} />,
  },
  { icon: IconActivity, 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}
      rightSection={item.rightSection}
      icon={<item.icon size={16} stroke={1.5} />}
      onClick={() => setActive(index)}
    />
  ));


  return <Box sx={{ width: 220 }}>{items}</Box>;
}

Nested NavLinks

To create nested links put NavLink as children of another NavLink:

import { Box, NavLink } from '@mantine/core';
import { IconGauge, IconFingerprint } from '@tabler/icons';


function Demo() {
  return (
    <Box sx={{ width: 240 }}>
      <NavLink
        label="First parent link"
        icon={<IconGauge size={16} stroke={1.5} />}
        childrenOffset={28}
      >
        <NavLink label="First child link" />
        <NavLink label="Second child link" />
        <NavLink label="Nested parent link" childrenOffset={28}>
          <NavLink label="First child link" />
          <NavLink label="Second child link" />
          <NavLink label="Third child link" />
        </NavLink>
      </NavLink>


      <NavLink
        label="Second parent link"
        icon={<IconFingerprint size={16} stroke={1.5} />}
        childrenOffset={28}
        defaultOpened
      >
        <NavLink label="First child link" />
        <NavLink label="Second child link" />
        <NavLink label="Third child link" />
      </NavLink>
    </Box>
  );
}

Polymorphic component

NavLink is a polymorphic component, by default, its root element is button you can change that by setting component prop:

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


function Demo() {
  return <NavLink component="a" href="/home" target="_blank" />;
}
Go back
Burger – @mantine/core
Up next
Pagination – @mantine/core

NavLink component props

NameTypeDescription
active
boolean
Determines whether link should have active styles
children
ReactNode
Child links
childrenOffset
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.spacing or number to set collapsed links padding-left in px
color
MantineColor
Key of theme.colors, active link color
defaultOpened
boolean
Uncontrolled nested items collapse initial state
description
ReactNode
Secondary link description
disableRightSectionRotation
boolean
If set to true, right section will not rotate when collapse is opened
disabled
boolean
Adds disabled styles to root element
icon
ReactNode
Icon displayed on the left side of the label
label
ReactNode
Main link content
noWrap
boolean
If prop is set then label and description will not wrap on the next line
onChange
(opened: boolean) => void
Called when open state changes
opened
boolean
Controlled nested items collapse state
rightSection
ReactNode
Section displayed on the right side of the label
variant
"light" | "filled" | "subtle"
Active link variant

NavLink component Styles API

NameStatic selectorDescription
root.mantine-NavLink-rootRoot element
body.mantine-NavLink-bodyContains label and description
icon.mantine-NavLink-iconIcon on the left side of the body
rightSection.mantine-NavLink-rightSectionSection on the right side of the body
label.mantine-NavLink-labelLabel
description.mantine-NavLink-descriptionDimmed description displayed below the label
children.mantine-NavLink-childrenWrapper around nested links
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter