NavLinkpolymorphic

Navigation link

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

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

function Demo() {
  return (
    <Box w={240}>
      <NavLink label="With icon" icon={<IconHome2 size="1rem" stroke={1.5} />} />
      <NavLink
        label="With right section"
        icon={<IconGauge size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
      />
      <NavLink label="Disabled" icon={<IconCircleOff size="1rem" stroke={1.5} />} disabled />
      <NavLink
        label="With description"
        description="Additional information"
        icon={
          <Badge size="xs" variant="filled" color="red" w={16} h={16} p={0}>
            3
          </Badge>
        }
      />
      <NavLink
        label="Active subtle"
        icon={<IconActivity size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
        variant="subtle"
        active
      />
      <NavLink
        label="Active light"
        icon={<IconActivity size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" stroke={1.5} />}
        active
      />
      <NavLink
        label="Active filled"
        icon={<IconActivity size="1rem" stroke={1.5} />}
        rightSection={<IconChevronRight size="0.8rem" 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

Shades

Variant

Subtle

Light

Filled

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

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

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

Nested NavLinks

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

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

function Demo() {
  return (
    <Box w={240}>
      <NavLink
        label="First parent link"
        icon={<IconGauge size="1rem" 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="1rem" 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 '@asuikit/core';

function Demo() {
  return <NavLink component="a" href="/home" target="_blank" />;
}

Go back

Burger – @asuikit/core

Up next

Pagination – @asuikit/core

NavLink component props

Name	Type	Description
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 any valid CSS value to set collapsed links padding-left
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	Variants<"light" \| "filled" \| "subtle">	Active link variant

NavLink component Styles API

Name	Static selector	Description
root	.asuikit-NavLink-root	Root element
body	.asuikit-NavLink-body	Contains label and description
icon	.asuikit-NavLink-icon	Icon on the left side of the body
rightSection	.asuikit-NavLink-rightSection	Section on the right side of the body
label	.asuikit-NavLink-label	Label
description	.asuikit-NavLink-description	Dimmed description displayed below the label
children	.asuikit-NavLink-children	Wrapper around nested links

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on GitHub GitHub discussions

Project

Mantine UI Documentation GitHub organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter