NavLink

Link component for use in navigation

NavLink variants can be defined in the

theme.links

object. By default the NavLink component will use styles defined in

theme.links.nav

Overview

({ p }) => (
  <Flex>
    <NavLink href="#!" sx={{ p }}>
      Home
    </NavLink>
    <NavLink href="#!" sx={{ p }}>
      Blog
    </NavLink>
    <NavLink href="#!" sx={{ p }}>
      About
    </NavLink>
  </Flex>
)

Controls

Name	Description	Default	Controls
p	Padding on top, left, bottom and right ResponsiveValue<stringnumbersymbol, Required<Theme<TLengthStyledSystem>>>	-

Home Blog About

Viewport

320px

375px

768px

1024px

Docs

NavLink

Overview

Controls

color

name-role-value

semantics

Viewport

Docs

NavLink

Overview

Controls

A11y tests

Viewport