v1.1.10

Nav Link

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/nav-link

npm @spark-web/nav-link

Source GitHub.com

Bundle unpkg.com

Nav links are styled links for use in site navigation.

Open in Playroom

<Stack as="nav" gap="small">
  <NavLink href="#" isSelected>
    <HomeIcon />
    Dashboard
  </NavLink>
  <NavLink href="#">
    <ClipboardListIcon />
    Applications
  </NavLink>
  <NavLink href="#">
    <BriefcaseIcon />
    Leads
  </NavLink>
  <NavLink href="#">
    <AcademicCapIcon />
    Training
  </NavLink>
  <NavLink href="#">
    <ChartSquareBarIcon />
    Analytics
  </NavLink>
  <NavLink href="#">
    <CogIcon />
    Settings
  </NavLink>
</Stack>

<Stack as="nav" gap="small">
  <NavLink href="#" isSelected>
    <HomeIcon />
    Dashboard
  </NavLink>
  <NavLink href="#">
    <ClipboardListIcon />
    Applications
  </NavLink>
  <NavLink href="#">
    <BriefcaseIcon />
    Leads
  </NavLink>
  <NavLink href="#">
    <AcademicCapIcon />
    Training
  </NavLink>
  <NavLink href="#">
    <ChartSquareBarIcon />
    Analytics
  </NavLink>
  <NavLink href="#">
    <CogIcon />
    Settings
  </NavLink>
</Stack>

Children

Valid children of a NavLink are a string, or a string plus an icon. No other combinations are allowed.

Border Radius

There are two valid border radii for a NavLink: 'small' and 'full'. Typically 'small' should be used for vertical navigations (like a sidebar) and 'full' should be used for horizontal navigations like in a header.

Hover or focus to see the different border radius options

Open in Playroom

<Stack gap="large">
  <Text weight="semibold">
    Hover or focus to see the different border radius options
  </Text>
  <Stack as="nav" gap="small">
    <NavLink href="#">"Small" border radius nav item</NavLink>
    <NavLink href="#" borderRadius="full">
      "Full" border radius nav item
    </NavLink>
  </Stack>
</Stack>

<Stack gap="large">
  <Text weight="semibold">
    Hover or focus to see the different border radius options
  </Text>
  <Stack as="nav" gap="small">
    <NavLink href="#">"Small" border radius nav item</NavLink>
    <NavLink href="#" borderRadius="full">
      "Full" border radius nav item
    </NavLink>
  </Stack>
</Stack>

isSelected

The isSelected prop is used to style the currently active page. It is important that it is only treated as active if the page is current as it also sets the aria-current attribute to page.

Size

NavLinks can be either medium or large.

Open in Playroom

<Columns gap="small" collapseBelow="desktop">
  <Stack as="nav" gap="small">
    <NavLink href="#">Medium size nav item</NavLink>
    <NavLink href="#" size="large">
      Medium size nav item
    </NavLink>
  </Stack>
  <Stack as="nav" gap="small">
    <NavLink href="#">
      <HomeIcon />
      Large size nav item
    </NavLink>
    <NavLink href="#" size="large">
      <HomeIcon />
      Large size nav item
    </NavLink>
  </Stack>
</Columns>

<Columns gap="small" collapseBelow="desktop">
  <Stack as="nav" gap="small">
    <NavLink href="#">Medium size nav item</NavLink>
    <NavLink href="#" size="large">
      Medium size nav item
    </NavLink>
  </Stack>
  <Stack as="nav" gap="small">
    <NavLink href="#">
      <HomeIcon />
      Large size nav item
    </NavLink>
    <NavLink href="#" size="large">
      <HomeIcon />
      Large size nav item
    </NavLink>
  </Stack>
</Columns>

Inline

By default, the underlying element will be display: flex and will take up all available space. By setting the inline prop to true the NavLink will be display: inline-flex instead.

NavLink without inline prop NavLink without inline prop NavLink without inline prop

NavLink with inline prop NavLink with inline prop NavLink with inline prop

Open in Playroom

<Stack gap="small">
  <Box>
    <NavLink href="#">NavLink without inline prop</NavLink>
    <NavLink href="#">NavLink without inline prop</NavLink>
    <NavLink href="#">NavLink without inline prop</NavLink>
  </Box>
  <Divider />
  <Box>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
  </Box>
</Stack>

<Stack gap="small">
  <Box>
    <NavLink href="#">NavLink without inline prop</NavLink>
    <NavLink href="#">NavLink without inline prop</NavLink>
    <NavLink href="#">NavLink without inline prop</NavLink>
  </Box>
  <Divider />
  <Box>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
  </Box>
</Stack>

Props

Prop	Type	Description
children	NavLinkChildren: string \| [ReactElement<IconProps, string \| JSXElementConstructor<any>>, string] \| [string, ReactElement<IconProps, string \| JSXElementConstructor<any>>]	Children element(s) to be rendered inside the NavLink.
href	string	Returns the hyperlink's URL. Can be set, to change the URL.
borderRadius?	"full" \| "small"	Border radius of the NavLink. Default: `"small"`
data?	DataAttributeMap	Sets data attributes on the component.
inline?	boolean	Indicates if NavLink should be inline or not. Default: `false`
isSelected?	boolean	When true, add active styles to the NavLink and sets the aria-current attribute to page. Default: `false`
size?	"medium" \| "large"	Sets the size of the NavLink. Default: `"medium"`