NavLink

Link component for use in navigation

import { NavLink } from 'theme-ui'

<Flex as="nav">
  <NavLink href="#!" p={2}>
    Home
  </NavLink>
  <NavLink href="#!" p={2}>
    Blog
  </NavLink>
  <NavLink href="#!" p={2}>
    About
  </NavLink>
</Flex>
<Flex as="nav">
  <NavLink href="#!" p={2}>
    Home
  </NavLink>
  <NavLink href="#!" p={2}>
    Blog
  </NavLink>
  <NavLink href="#!" p={2}>
    About
  </NavLink>
</Flex>

Variants

NavLink variants can be defined in the theme.links object. By default the NavLink component will use styles defined in theme.links.nav.

// example theme variants
{
  links: {
    nav: {
      px: 2,
      py: 1,
      textTransform: 'uppercase',
      letterSpacing: '0.2em',
    }
  }
}