NavLinkpolymorphic

Navigation link
Import

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" />;
}
Download more icon variants from https://tabler-icons.io/i/search

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