---
name: Navigation link
route: /components/common/navigation-link
edit: false
---

import { Playground, Props } from 'docz'
import NavigationLink from './navigation-link'
import NavigationLinkIcon from './navigation-link-icon'

# NavigationLink
**SUBCATEGORY:** Navigation

<hr />

## Navigation link
### Description
For primary navigation such as the product masthead.

<Playground>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
  />
</Playground>

**Selected**

<Playground>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
    selected
  />
</Playground>

<hr />

## Navigation link + icon
### Description
For primary navigation such as the product masthead. Icons can add extra definition.
<Playground>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='account'
  />
</Playground>

**Selected**

<Playground>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='account'
    selected
  />
</Playground>

<hr />

## Navigation link (inverse)
### Description
For primary navigation such as the product masthead.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    alt='Navigation link'
    href='/components-navigation-link'
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    alt='Navigation link'
    href='/components-navigation-link'
    inverse
    selected
  />
</Playground>

<hr />

## Navigation link + icon (inverse)
### Description
For primary navigation such as the product masthead. Icons can add extra definition.
<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    alt='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    alt='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    inverse
    selected
  />
</Playground>

<hr />

## Navigation link (inverse, secondary)
### Description
For secondary navigation such as the product footer.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
    secondary
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
    secondary
    inverse
    selected
  />
</Playground>

<hr />

## Navigation link + icon (inverse, secondary)
### Description
For secondary navigation such as the product footer. Icons can add extra definition.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    secondary
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    secondary
    inverse
    selected
  />
</Playground>

<hr />

## Navigation link (inverse, secondary, major)
### Description
For secondary navigation such as the product footer, with items of lower priority.
<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
    secondary
    major
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
    secondary
    major
    inverse
    selected
  />
</Playground>

<hr />

## Navigation link + icon (inverse, secondary, major)
### Description
For secondary navigation such as the product footer, with items of lower priority. Icons add extra definition.
<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    secondary
    major
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    secondary
    major
    inverse
    selected
  />
</Playground>

<hr />

## Navigation link (inverse, secondary, minor)
### Description
For secondary navigation such as the product footer.
<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
    secondary
    minor
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLink
    text='Navigation link'
    href='/components-navigation-link'
    secondary
    minor
    inverse
    selected
  />
</Playground>

<hr />

## Navigation link + icon (inverse, secondary, minor)
### Description
For secondary navigation such as the product footer. Icons add extra definition.
<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    secondary
    minor
    inverse
  />
</Playground>

**Selected**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <NavigationLinkIcon
    text='Navigation link + icon'
    href='/components-navigation-link'
    icon='search'
    secondary
    minor
    inverse
    selected
  />
</Playground>

<hr />

## Properties
<Props of={NavigationLink} />
